AntDesignVue通过iconfont构建⾃定义图标库
虽然Ant Design Vue已经为我们内置了很多icon图标，我们很⽅便就能使⽤，但有时候有些图表我们还是系统能实现定义，本⽂主要介绍根据iconfont图标库创建⾃定义的icon图表，并在Ant Design Vue中使⽤
⾸先在iconfont⾥⾯将⾃⼰添加的图标添加到⾃定义项⽬后，下载压缩包，解压后你应该有如下结构：
iconfont.css
<
iconfont.js //这个js很重要
iconfont.json
<
iconfont.svgicon图标库
…其他⽂件
在Vue的⼯程的main.js中⾃定义图标组件，代码如下:
//引⼊Ant Design Vue中的icon
import{
Icon
}from'ant-design-vue'
//这个iconfont.js就是从iconfont⽹站上下载后的解压JS⽂件
import iconFront from'./assets/iconfonts/iconfont.js'
const myicon = ateFromIconfontCN({
scriptUrl: iconFront
})
//引⽤
Vueponent('my-icon', myicon)
到此,⾃定义图标组件就已经完成了，在我们的.vue组件中使⽤⽅法：
<template>
<a-layout-content class="knife4j-body-content">
<my-icon type="icon-home"></my-icon>使⽤⾃定义组件
</a-layout-content>
</template>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。