关于前端:Ant-Design-Pro自定义svg菜单图标不使用iconfont

环境和依赖

• umi 3.5.0

场景

Ant Design Pro 的文档介绍了配置菜单 icon 的办法，须要在 routes.ts 中设置 icon 属性，但只能应用 antd 的 icon 或者应用 iconFont，如果我想间接应用设计师提供的 svg 图片作为菜单图标，应该怎么办呢？本文提供了一种解决方案

步骤

1. 引入须要用到的 svg

   // MenuIcon.tsx
   import {ReactComponent as IconPerson} from '@/assets/icons/menu/person.svg';
   import {ReactComponent as IconHome} from '@/assets/icons/menu/home.svg';
   
   export const IconMap = {
    person: IconPerson,
    home: IconHome,
   };

2. 编辑 app.tsx

   import {IconMap} from '@/components/MenuIcon';
   import Icon from '@ant-design/icons';
   
   // ...
   export const layout: RunTimeLayoutConfig = ({initialState}) => {
    return {
    // ...
    menuDataRender: (menuData) => {return menuData.map((item) => {
        return {
          ...item,
          icon:
            typeof item.icon === 'string' && item.icon.indexOf('|svg') > -1 ? (<Icon component={IconMap[item.icon.replace('|svg', '')]} style={{fontSize: 14}} />
            ) : (item.icon),
        };
      });
    },
    // ...
    };
   };
   // ...

3. 在 route.ts 中配置 icon

   export default [
    {
      path: '/home',
      name: '首页',
      icon: 'home|svg',
      component: './personnel-management/index',
    },
    {
      path: '/personnel-management',
      name: '人员治理',
      icon: 'person|svg',
      component: './personnel-management/index',
    },
   ];

小提示

要使得 svg 图片的色彩可能依据菜单状态变动，设计师提供的 svg 不能写死色彩哦