iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
本文记录了ant design vue引入iconfont并使用的过程。其中ant design vue为1.x版本。iconfont引用方式为Symbol引用。icon图标注册为全局组件使用。
文章目录
使用过程symbol 引用方式 常见问题iconfont图标不能变色 链接使用过程
iconfont搜索选择需要的图标，加入购物车
可以看到右上角购物车处多了个红色数字角标。点击购物车弹出侧边栏，点击添加至项目。
symbol 引用方式
资源管理—>我的项目，进入“我的项目”。
平时调试时，可以使用在线引用方式。发布时建议下载到本地，解压下载的文件，里面有一个iconfont.js,将iconfont.js放到项目中。
下图是在线引入方式生成的链接：
在main.js中引入，并将其注册为全局组件。
//按路径引入iconfont.js文件import iconfrontjs from './assets/iconfont/iconfont.js'import {Icon } from 'ant-design-vue';const myIcon= Icon.createFromIconfontCN({scriptUrl: iconfrontjs//也可以使用在线方式：//scriptUrl: '///t/c/font_3770826_lt7f1n2o7zh.js'})ponent("my-icon", myIcon);
使用：
<my-icon class="tool-icon" type="icon-yunxiazai_o"></my-icon>
其中type的值是：
常见问题
iconfont图标不能变色
项目中有的图标可以变色，有的不能。
不能变色的icon对应的svg里都有fill属性，删掉fill就可以变色了。有以下几种方式解决：
直接删除fill属性：直接删除js文件里的fill。下载无颜色的icon：在“我的项目”中使用“批量去色”功能。
使用svgo-loader删除fill属性：先使用yarn add svgo-loader -D安装，然后在vue.config.js中进行配置，配置代码可能有所不同。
.use("svgo-loader").loader("svgo-loader").tap((options) => ({...options,plugins: [{removeAttrs: {attrs: "fill" } }],})).end();
链接
iconfont官网
iconfont代码应用
ant design vue 1.x icon图标
svgo-loader
