ant design vue pro 1.7x版本的,左侧菜单使用 svg 图标方法。
原由:
1.官方图标不够使用,或者某些图标不大合适。
2.由于后台管理系统返回的菜单图标是字符串的
官方方法自定义 svg 图标
//官方教程
//config/router.config.js 中
import { bxAnaalyse } from '@/core/icons'
.... asyncTouterMap = {
....
meta: { .... icon: bxAnaalyse ......
}
//自定义图标在 core/icons 中 import 和 export
解决方法:
1、原由1:需要进行图标扩展,上 iconfont 下载需要的 svg 图标,放入 assets/icons 中,在 core/icons.js import 和 export,在需要的地方 import 使用;
2、原由2:在使用的时候不可能全部都先 import {xxx} from ...,然后写个 switch 从字符串转成对象,所以这个时候采用 import * as xx from '@/core/icons',然后使用 xx['icon'] 进行使用
// api 返回左侧菜单数据,内包含 icon,类似如下:
// {"icon": "svg-shouyi", Name: '收益管理'......}
// 在生成左侧路由时类似下方代码
import * as icon from '@/core/icons'
......
return currentrouter = {
...
meta: {
icon: icon['Icon']
....
}
}
......
还有一种采用 vue-element-admin 的 icons 方式 require
改变图标颜色
在侧边栏使用自定义图标时,点击菜单会发现图标颜色不会更改。以下有三种方法可以改变颜色。
1、需要找到对应的 svg,然后删除 fill 或者改成 fill="#......",一个 svg 可能有多个 fill;
2、在 iconfont 下载图标的时候,使用添加到项目,点击批量操作 —> 批量去色;
3、使用 css3 的滤镜 filter 中得到属性 frop-shadow 改变 svg 的颜色;
<img :src="weather.icon" width="80" height="80" class="img" />
.img {
position: relatives;
left: -80px;
filter: drop-shadow(#fff 80px 0); // 投影颜色
}
// svg {
// fill: currentColor; // currentColor 为 css 变量,自动读取当前元素颜色
// }