环境和依赖
- umi 3.5.0
场景
Ant Design Pro 的文档介绍了配置菜单 icon 的办法,须要在 routes.ts 中设置 icon 属性,但只能应用 antd 的 icon 或者应用 iconFont,如果我想间接应用设计师提供的 svg 图片作为菜单图标,应该怎么办呢?本文提供了一种解决方案
步骤
-
引入须要用到的 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, };
-
编辑 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), }; }); }, // ... }; }; // ...
-
在 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 不能写死色彩哦