antd vue 左侧菜单使用svg图标。_vue 使用svg作为图标antdv

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