ant design pro vue左侧菜单自定义图标

做ant design pro vue项目的时候突然想修改左侧菜单的图标，在修改途中发现源码中提供的方法方法居然不生效（如下所示）

1. 在src/assets/icons文件夹中下载svg图标
2. 在src/core/icon.js中引用
3.     最后再src/config/router.config.js中引用并设置icon

最后在浏览器运行的时候我发现图标竟然没有显示，于是在网上查找大佬们的写法发现两种生效的办法。（如下所示）

---

 方法一（使用ui官方图标Ant Design Vue）

 去ui官网查看图标并复制图标名称并添加到src/config/router.config.js路由的icon中

由于方法一使用ui框架自带图标，可选图标种类有限，一般不推荐使用此方法。

---

方法二（使用iconfont图标）

我这里使用的是阿里的图标iconfont-阿里巴巴矢量图标库

1.  依次点击  "我的项目"——"Font class"   生产对应的代码

    

2. 点击生成的链接，全选复制代码

3. 这里我在src/assets文件夹下新建了iconfont.css，并将代码复制进去

4. 将新建的文件中以iconfont开头的修改为anticon

5. 在新建的iconfont.css中添加如下代码

   .anticon:before {
     display: block !important;
   }

   

6. 在app.vue中引入新建的iconfont.css文件

   @import './assets/iconfont.css';

   

7. 最后在src/config/router.config.js中设置路由的icon即可，此处直接复制不带anticon前缀的部分到icon即可（如anction-yibiaopan直接复制 yibiaopan至icon属性出即可）

8. 之后就大功告成了（附上效果图）

    若有新的iconfont图标添加到阿里的项目中则重新按方法二的步骤重新走一遍即可