解决react antd design pro 二级图标不显示问题（v4版本）

1、问题描述

在项目路由配置中，对各个子路由配置icon属性，但是项目实际运行中并不能显示

{
      path: '/system',
      name: 'system',
      icon: 'icon-xitong',
      routes: [
         {
           path: '/system/user',
           name: 'user',
           icon: 'smile',
           component: './system/index',
           // authority: ['admin'],
         }
        ]
}

效果如下图所示

2 解决思路及编码

2.1 选择iconfont资源

 个人在开发中选择阿里的iconfont，作为路由的icon，[https://www.iconfont.cn/](https://www.iconfont.cn/)

2.2 创建图标组件

以下配置依据个人开发情况酌情修改
在项目工程目录components下创建 SvgIcon文件夹，并创建index.js 项目文件，文件内容如下

同时为清晰参考，提供该目录

2.3 重写 BasicLayout.jsx 中 方法

在 https://procomponents.ant.design/components/layout#prolayout 文档中提供了

menuItemRender	自定义菜单项的 render 方法	
subMenuItemRender	自定义拥有子菜单菜单项的 render 方法

<ProLayout
	menuItemRender={(menuItemProps, defaultDom) => {
	        return (
	          <Link to={menuItemProps.path ? menuItemProps.path : '#'}>
	            {menuItemProps.icon && < SvgIcon type={menuItemProps.icon.toString()} />}	{menuItemProps.name}
	          </Link>
	        )
	      }}
	      subMenuItemRender={(subMenuITem) => {
	        return (
	          <>
	            <span className="ant-pro-menu-item">
	              <span role="img" className="anticon">
	                {subMenuITem.icon && <SvgIcon type={subMenuITem.icon.toString()} />}
	              </span>
	              <span>
	                {subMenuITem.name}
	              </span>
	            </span>
	          </>
	        )
	      }}
 />

2.4 完成配置，刷新页面即可

以上亲测有效，希望帮助到各位。

pro 坑太深，也希望社区资源原来越丰富。