1.在src/utils目录下新建一个fixMenuItemIcon.js文件，创建一个function fixMenuItemIcon来正常显示菜单图标

    2.复制以下代码到fixMenuItemIcon.js文件中

    1. import React from 'react';
    2. import * as allIcons from '@ant-design/icons';
    4. function fixMenuItemIcon(menus, iconType = 'Outlined') {
    5.   if (menus && menus.length > 0) {
    6.     menus.forEach((item) => {
    7.       const { icon, children } = item;
    9.       if (icon && typeof icon === 'string') {
    11.           const fixIconName = icon.slice(0, 1).toLocaleUpperCase() + icon.slice(1) + iconType;        
    12.           let iconObject ='';
    13.           if(typeof allIcons[fixIconName] !== 'undefined')
    14.           {
    15.             iconObject = React.createElement(allIcons[fixIconName]);
    16.           }
    17.           else if(typeof allIcons[icon] !== 'undefined')
    18.           {
    19.             iconObject = React.createElement(allIcons[icon]);
    20.           }
    21.           item.icon = iconObject;
    23.       }
    25.       children && children.length > 0 ? (item.children = fixMenuItemIcon(children)) : null;
    26.     });
    27.   }
    28.   return menus;
    29. }
    31. export default fixMenuItemIcon;

    3.这段代码稍作说明，遍历所有菜单item,根据菜单的icon属性，创建对应的Outlined类型图标对象，改完后item.icon是一个真正的antd pro图标对象，如果图标名称是antd pro中不存在的图标，那么item.icon=’’;

    1.      if (icon && typeof icon === 'string') {
    3.           const fixIconName = icon.slice(0, 1).toLocaleUpperCase() + icon.slice(1) + iconType;        
    4.           let iconObject ='';
    5.           if(typeof allIcons[fixIconName] !== 'undefined')
    6.           {
    7.             iconObject = React.createElement(allIcons[fixIconName]);
    8.           }
    9.           else if(typeof allIcons[icon] !== 'undefined')
    10.           {
    11.             iconObject = React.createElement(allIcons[icon]);
    12.           }
    13.           item.icon = iconObject;
    15.       }

    4.如果菜单有子菜单，递归做同样的操作，即给菜单配上真正的图标
    children && children.length > 0 ? (item.children = fixMenuItemIcon(children)) : null;
    });

    5.fixMenuItemIcon.js写完后，我们要在src/app.jsx中调用一下，在app.jsx中引入fixMenuItemIcon

    1. import fixMenuItemIcon from '@/utils/fixMenuItemIcon';

    6.在 menuDataRender: () =>{ return initialState?.menuData },这行代码中加入fixMenuItemIcon方法

    1.     menuDataRender: () =>{
    2.       return fixMenuItemIcon(initialState?.menuData);
    3.          },

    7.保存，等编译通过后，重新登录查看下菜单数据,顺利的话，菜单图标会正常显示，如下图
    image.png