umi 路由配置 菜单icon

要在 umi 路由配置中添加菜单 icon，可以在路由配置中添加一个 icon 属性。例如：

export default [
  {
    path: '/home',
    name: '首页',
    icon: 'home',
    component: '@/pages/Home',
  },
  {
    path: '/about',
    name: '关于',
    icon: 'info-circle',
    component: '@/pages/About',
  },
];

其中，icon 属性值可以是 antd 的 icon 组件名称，也可以是自定义的 SVG 图标。

接下来，在菜单组件中根据路由配置渲染菜单项时，可以获取路由配置中的 icon 属性，并将其作为菜单项的 icon 属性值。例如：

import { Menu } from 'antd';
import { Link, useLocation } from 'umi';

export default function MenuList(props) {
  const location = useLocation();

  return (
    <Menu theme="dark" selectedKeys={[location.pathname]}>
      {props.routes.map((item) => (
        <Menu.Item key={item.path} icon={<item.icon />}>
          <Link to={item.path}>{item.name}</Link>
        </Menu.Item>
      ))}
    </Menu>
  );
}

这样就可以在菜单项中显示对应的 icon 了。