乐趣区

关于前端: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 不能写死色彩哦

退出移动版