做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示)
- 在src/assets/icons文件夹中下载svg图标
- 在src/core/icon.js中引用
- 最后再src/config/router.config.js中引用并设置icon
最后在浏览器运行的时候我发现图标竟然没有显示,于是在网上查找大佬们的写法发现两种生效的办法。(如下所示)
方法一(使用ui官方图标Ant Design Vue)
去ui官网查看图标并复制图标名称并添加到src/config/router.config.js路由的icon中
由于方法一使用ui框架自带图标,可选图标种类有限,一般不推荐使用此方法。
方法二(使用iconfont图标)
我这里使用的是阿里的图标iconfont-阿里巴巴矢量图标库
- 依次点击 "我的项目"——"Font class" 生产对应的代码
-
点击生成的链接,全选复制代码
-
这里我在src/assets文件夹下新建了iconfont.css,并将代码复制进去
-
将新建的文件中以iconfont开头的修改为anticon
-
在新建的iconfont.css中添加如下代码
.anticon:before { display: block !important; }
-
在app.vue中引入新建的iconfont.css文件
@import './assets/iconfont.css';
-
最后在src/config/router.config.js中设置路由的icon即可,此处直接复制不带anticon前缀的部分到icon即可(如anction-yibiaopan直接复制 yibiaopan至icon属性出即可)
-
之后就大功告成了(附上效果图)
若有新的iconfont图标添加到阿里的项目中则重新按方法二的步骤重新走一遍即可