Ant Design Pro 4.0动态菜单图标显示

在使用Ant Design Pro 4.0进行React开发时，可通过设置 icon 配置菜单图标，但这在 antd@4 中将无法得到支持，官方也提供了相应的插件来保留此功能。这在前端route.ts生成的静态菜单是有效的，但动态生成菜单时，发现并没有显示图标。经过调试，发现umi-plugin-antd-icon-config插件只在应用初始时生效。依葫芦画瓢，通过复制粘贴umi-plugin-antd-icon-config的代码到BasicLayout.tsx，菜单图标显示问题得到完美解决。

注：官方出示例代码，请移步：从服务器加载-menu-并且使用-icon

1、引入 antd@4 图标

import * as allIcons from '@ant-design/icons/es';

2、处理菜单数据的函数

const toHump = (name: string) =>
  name.replace(/-(\w)/g, (all: string, letter: any) => letter.toUpperCase());
const formatter = (data: any[]) => {
  data.forEach(item => {
    if (item.icon) {
      const { icon } = item;
      const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase()));
      const NewIcon = allIcons[icon] || allIcons[''.concat(v4IconName, 'Outlined')];
      if (NewIcon) {
        try {
          // eslint-disable-next-line no-param-reassign
          item.icon = React.createElement(NewIcon);
        } catch (error) {
          console.log(error);
        }
      }
    }

    if (item.routes || item.children) {
      const children = formatter(item.routes || item.children); // Reduce memory usage

      item.children = children;
    }
  });
  return data;
};

const patchRoutes = (routes: any[]): any => formatter(routes);

参考文档：迁移 antd@4 指南

3、处理菜单数据

  const [menuData, setMenuData] = useState([]);
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }

    queryMenu().then(data => {
      setMenuData(patchRoutes(data || []));
    });
  }, []);

参考文档：Ant Design Pro 4.0从服务器请求菜单

4、菜单数据样例

// 代码中会兼容本地 service mock 以及部署站点的静态数据
export default {
  // 支持值为 Object 和 Array
  'GET /api/menu': [
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'smile',
    },
    {
      path: '/admin',
      name: 'admin',
      icon: 'crown',
      routes: [
        {
          path: '/admin/sub-page',
          name: 'sub-page',
          icon: 'smile',
        },
      ],
    },
    {
      name: 'list.table-list',
      icon: 'table',
      path: '/list',
    },
  ],
};