Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon

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

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

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

1. getIcon方法

const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:ponent={PandaSvg} {...props} />; ReactDOM.render( <div className="custom-icons-list"> <HeartIcon style={{ color: 'hotpink' }} /> <PandaIcon style={{ fontSize: '32px' }} /> </div>, mountNode,);

补充知识：Ant Design Pro Of Vue 项目中路由菜单icon 修改或新增

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

如：

<a-icon type="user" />

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