虽然Ant Design Vue已经为我们内置了很多icon图标,我们很方便就能使用,但有时候有些图表我们还是系统能实现定义，本文主要介绍根据iconfont图标库创建自定义的icon图表,并在Ant Design Vue中使用
首先在iconfont里面将自己添加的图标添加到自定义项目后，下载压缩包，解压后你应该有如下结构：
iconfont.css
iconfont.eot
iconfont.js //这个js很重要
iconfont.json
iconfont.ttt
iconfont.svg
…其他文件
在Vue的工程的main.js中自定义图标组件,代码如下:
//引入Ant Design Vue中的icon
import {
Icon
} from 'ant-design-vue'
//这个iconfont.js就是从iconfont.cn网站上下载后的解压JS文件
import iconFront from './assets/iconfonts/iconfont.js'
const myicon = Icon.createFromIconfontCN({
scriptUrl: iconFront
})
//引用
Vue.component('my-icon', myicon)
到此,自定义图标组件就已经完成了,在我们的.vue组件中使用方法：
<template>
<a-layout-content class="knife4j-body-content">
<my-icon type="icon-home"></my-icon> 使用自定义组件
</a-layout-content>
</template>
Ant Design Vue自定义icon图标文档：https://www.antdv.com/components/icon-cn/
