ant design vue 1.x版本使用iconfont

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

本文记录了ant design vue引入iconfont并使用的过程。其中ant design vue为1.x版本。iconfont引用方式为Symbol引用。icon图标注册为全局组件使用。

使用过程

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: '//at.alicdn.com/t/c/font_3770826_lt7f1n2o7zh.js'
 })
 Vue.component("my-icon", myIcon);

使用：

<my-icon class="tool-icon" type="icon-yunxiazai_o"></my-icon>

其中type的值是：

常见问题

iconfont图标不能变色

项目中有的图标可以变色，有的不能。

不能变色的icon对应的svg里都有fill属性，删掉fill就可以变色了。有以下几种方式解决：

1. 直接删除fill属性： 直接删除js文件里的fill。
2. 下载无颜色的icon： 在“我的项目”中使用“批量去色”功能。
   
3. 使用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