Ant Design Pro自定义菜单图标

Ant Design Pro支持直接修改菜单图标为ant-design/icons和iconfont图标，但实际开发中我们需要换上设计图中的图标，所以需要完全自定义菜单图标。

自定义步骤如下：

【第一步】在@/components/MenuIcon文件中引入svg图标

const summarize = () => (
  <svg
    width="14"
    height="12"
    viewBox="0 0 14 12"
    fill="none"
    stroke="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M7.00033 8.33333V11.25M7.00033 8.33333L10.5003 11.25M7.00033 8.33333L3.50033 11.25M12.2503 0.75V5.53333C12.2503 6.51342 12.2503 7.00347 12.0596 7.37782C11.8918 7.7071 11.6241 7.97482 11.2948 8.14259C10.9205 8.33333 10.4304 8.33333 9.45033 8.33333H4.55033C3.57023 8.33333 3.08019 8.33333 2.70584 8.14259C2.37656 7.97482 2.10884 7.7071 1.94106 7.37782C1.75033 7.00347 1.75033 6.51342 1.75033 5.53333V0.75M4.66699 4.25V6M7.00033 3.08333V6M9.33366 5.41667V6M12.8337 0.75H1.16699"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export const IconMap: any = {
  summarize,
};

【第二步】在app.tsx中修改菜单显示的图标

import { IconMap } from '@/components/MenuIcon';
import Icon from '@ant-design/icons';

export const layout = () => {
  return {
    menuDataRender: (menuData: any) => {
      return menuData.map((item: any) => {
        return {
          ...item,
          icon:
            typeof item.icon === 'string' && item.icon.indexOf('|custom') > -1 ? (
              <Icon component={IconMap[item.icon.replace('|custom', '')]} />
            ) : (
              item.icon
            ),
        };
      });
    },
  };
};

【第三步】在routes.ts中设置菜单icon的名称（加上过滤自定义标签的标识，我这里加的是"|custom"，改成其他的也一样）

{
  path: '/summarize',
  name: 'summarize',
  icon: 'summarize|custom',
  component: './Summarize',
},