2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > ant design pro vue左侧菜单自定义图标

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

时间:2023-05-19 12:01:35

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。