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

ant design pro vue左侧菜单自定义图标相关推荐

Ant Design Pro组件pro-layout菜单自定义icon，以及二级菜单不显示icon处理
使用IconFont IconFont官网,进入后我们登陆,然后创建一个项目管理图中的连接是Icon的地址,需要把它放到我们项目配置下的iconfontUrl参数下注意!!! 创建项目时 Font ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
ant design pro侧边栏子菜单添加不成功的解决办法
项目场景: Ant design pro侧边栏添加子菜单问题描述: 在企业工作中 Ant design pro侧边栏添加子菜单如果不成功要检查以下几个部分原因分析: 刚进公司的新员工如果接触到新的 ...
Ant Design Pro Vue 登录后userInfo存在vuex问题
问题描述: 作者发现使用Ant Design Pro中存在一个问题,页面刷新后vuex数据丢失,导致UserInfo找不到影响页面的问题,故而写此文,望能助有需之人. 原因分析: 提示:Vuex的机制 ...
Ant Design Pro 4 动态菜单icon丢失解决办法
最近在开发人事管理系统,其中菜单是需要动态渲染,针对不同角色授权不同的菜单权限. 路由由后端返回,格式如下: [ { "path": "/", "na ...
同志们,免费版的Ant Design Pro Vue3 来啦
Vue3也出了一段时间了,于是照着ant pro vue搭个免费的vue3版希望大家喜欢基于 Vite2 Vue3 Ant-Design-of-Vue2 TS实现的 Ant Design Pro ...
Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标
Ant Design Pro 使用iconfont上的图标有两种方法: 1.加载在线图标创建一个项目(图标的前缀一定要设置为:icon-) 创建远程连接复制代码,找到ant design pro项 ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...

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

ant design pro vue左侧菜单自定义图标相关推荐

最新文章

热门文章