ant design 从3升级到4后，菜单图标不显示

[Topppy]

背景

• antd3升级到4.0.0
• "@ant-design/pro-layout": "^5.0.0",
• 动态菜单

现象

升级之后，路由配置中的icon: 'home' 不再渲染成图标，而是渲染成为字符home。

debug过程

1. 根据文档，配置了umi-plugin-antd-icon-config插件，问题依旧存在

2. clone https://github.com/ant-design/ant-design-pro/tree/antd%404 到本地对比

打印输出，发现官方的antd@4项目中，layout的menuItemRender方法中的defaultDom里icon已经变为组件，而我的项目依旧是字符。

于是自己增加一步处理，将字符映射为ICON组件

const ICONS = {
  home: <HomeOutlined />,
}

...
// 动态路由state
const [menuData, setMenuData] = useState([] as MenuDataItem[]);
// 手动渲染icon组件
const authorizedFilter = (list: MenuDataItem[]): MenuDataItem[] => list.map(item => {
      const localItem = {
        ...item,
        children: item.children ? authorizedFilter(item.children) : [],
        icon: ICONS[item.icon] || null, // antd layout升级到5之后路由配置里的icon无法自己渲染出来，需要我们自己映射为icon组件
      };
      return Authorized.check(item.authority, localItem, null) as MenuDataItem;
    })

...
// 获取数据之后
setMenuData(authorizedFilter(menuList as MenuDataItem[]))

// 渲染
...
<ProLayout
...
    menuDataRender={() => menuData}
...

/>