基于vue3 + ant-design 使用阿里图标库iconfont.cn

对于使用 iconfont.cn 的用户,通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段,

即可轻松地使用已有项目中的图标。

组件封装 IconFont

javascript 复制代码
<template>
    <IconFont :type="iconType" />
</template>

<script setup lang="ts">

import { createFromIconfontCN } from '@ant-design/icons-vue';
// 创建从 Iconfont CN 获取图标的实例
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_4591064_rhr61coyfx.js', // 替换为你实际的 scriptUrl
    //  scriptUrl 在阿里图标库里面去生成,添加新的图标都需要重新生成js文件
})

let props = defineProps<{ type?: string }>()

const iconType = ref<string>('')

iconType.value = props.type == undefined ? 'icon-tuichu' : props.type
</script>

<style scoped>
.icons-list :deep(.anticon) {
    margin-right: 6px;
    font-size: 24px;
}
</style>

使用

javascript 复制代码
import IconFont from '@/components/IconFont.vue'

<IconFont :type="'icon-shengdanye'"></IconFont>
// 绑定的type值需要在阿里图标库生成js的文件中

阿里图标库添加链接描述

symbol 生成链接粘贴进去即可

相关推荐
T^T尚12 分钟前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志34 分钟前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE39240 分钟前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
GISer_Jing1 小时前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪1 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山1 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生1 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心1 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师1 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲1 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架