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图标添加到阿里的项目中则重新按方法二的步骤重新走一遍即可

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值