antd vue 自定义侧边栏svg图标、并改变图标颜色

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 的颜色；

"weather.icon" width="80" height="80" class="img" />

.img {
  position: relatives;
  left: -80px;
  filter: drop-shadow(#fff 80px 0);  // 投影颜色
}
 
// svg {
//   fill: currentColor;  // currentColor 为 css 变量，自动读取当前元素颜色
// }