浅谈Ant Design Pro 菜单自定义 icon

ant design pro 官方文档说明 在菜单中使用自定义的 icon

由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，pro 中暂时支持 使用 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，pro 会自动处理为一个 img 标签。

如果这样还不能满足需求，可以自定义 geticon 方法。

如果你想使用 iconfont 的图标，你可以使用ant.desgin的自定义图标.

1. geticon方法

这个geticon 来自于 antd pro 源代码 geticon 很全面，既可以用 icon（使用antd 提供的icon），又可以用 iconfont（使用仓库的icon），还可以用静态资源文件（<img src={....} /> 转换成 icon）；

实际项目中很多时候是需要替换成公司设计师设计的icon，因此我将他做了个简单的转换

注意：img width height 设置为 1em ,让它自适应parent组件的大小，实现菜单打开/关闭时，图片的缩放，如果给具体数值则没有缩放效果！！！

2. 使用ant.desgin的自定义图标（使用 svg）.

利用 icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。

代码来自于

补充知识：ant design pro of vue 项目中路由菜单icon 修改或新增

在 config / router.config.js 中修改，直接从 取，只要 icon 组件的 type 值即可。

如：

<a-icon type="user" />

以上这篇ant design pro 菜单自定义 icon就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。