umi后台项目导航自定义icon问题

问题描述

在开发后台项目使用umi+antd pro库使用阿里矢量图自定义icon，由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，所以引入本地下载的svg图片就会报错。

结合官方案例不能在路由中处理，可以在layout中处理

1. 将阿里矢量图下载好后保存到项目中的src/assets文件夹下
2. 在layout中引入svg图片，将需要自定义的图标存在IconMap对象中，生命menuDateRender方法处理路由信息，ProLayout渲染左侧导航目录
3. 可以参考 antd pro中的用法
4. 完成之后发现自定义的icon和其他引入的icon的样式不一样，在svg标签里面更改一些属性

• class=“acticon” 统一为antd导航中 svg类名
• aria-hidden=“true” 去掉原有颜色
• “fill” = “currentColor” 通过继承父元素color属性可以改变颜色，移入移出也会改变
• width=“1em” height=‘1em’