🐛[BUG] 动态菜单图标配置

[TinsFox]

What happens?

plugin-layout 动态菜单图标无法正确显示

Mini Showcase Repository(REQUIRED)

Please provide a repository using yarn create @umijs/umi-app then upload to your GitHub 请提供一个可复现的仓库，使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库

按照 https://umijs.org/zh-CN/plugins/plugin-layout 中的扩展的路由配置，我配置一个动态菜单，希望菜单中带有icon，应该是配置icon 字段，赋予该字段一个string 类型的值

icon name 为 组件名小写后去掉 outlined 或者 filled 或者 twotone，所得值。举例： 的 icon name 即： user

也就是说我希望展示 <SmileOutlined/> 的时候给icon 赋值smile 即可，但是实际上展示出来的是smile文本，而不是图标，user
同理
复现代码

const loopMenuItem = (menus) =>
  menus.map(({ icon, children, ...item }) => ({
    ...item,
    // icon: <SmileOutlined/>,
    icon: 'smile',
    children: children && loopMenuItem(children),
  }));

export const layout = ({ initialState }) => {
  return {
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      locale: false,
      params: initialState,
      // TODO 第一次菜单渲染空
      request: async () => {
        console.log('菜单数据', initialState?.currentRouters)
        return initialState?.currentRouters || defaultMenuData;
      },
    },
  };
};

复现效果图

可以达到目标的方案(但是也之后以及菜单有图标，二级菜单仍然是没有)

const loopMenuItem = (menus) =>
  menus.map(({ icon, children, ...item }) => ({
    ...item,
+ icon: <SmileOutlined/>,
-  icon: 'smile',
    children: children && loopMenuItem(children),
  }));

效果图

How To Reproduce

使用antd Pro V5 配置动态菜单数据并传入

因为是在antd Pro V5 中使用，不清楚是哪个引起的错误，有可能是antd Pro V5 也可能是umi或者是ProLayout

Context

• antd Pro Version: 5.0.0
• Umi Version: 3.5.0
• Node Version: v12.18.3
• Platform: mac OS 10.13.4

其他信息

在ProLayout 中， 传入的是组件
https://procomponents.ant.design/components/layout#%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8A%A0%E8%BD%BD-menu-%E5%B9%B6%E4%B8%94%E4%BD%BF%E7%94%A8-icon
关联umi issues

[chenshuai2144]

#8101