Antd Design Pro二级菜单不显示icon问题

原创已于 2022-05-07 10:08:12 修改 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-22 16:08:24 首次发布

react 专栏收录该内容

10 篇文章

订阅专栏

在Ant Design Pro项目中，自定义配置路由时遇到二级菜单不显示icon的问题。解决方法包括：调整routes.ts文件，使用loopMenuItem处理；在菜单中引入iconFont，确保配置iconFontUrl并以icon-开头的命名；从iconfont官网获取iconfontUrl，并在项目中应用，使二级菜单的icon得以显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因：在antd pro项目，通过自定义配置路由方式，有一些配置全局通用的处理逻辑，希望在所有页面加载前执行，在所有路由外包了一层layout来达到目标,但antd pro对二级菜单默认不展示icon。这里其实二级菜单是项目的主菜单，需要icon展示。

先列一下配置参数具体值：

name:string 配置菜单的 name，如果配置了国际化，name 为国际化的 key。
icon:string 配置菜单的图标，默认使用 antd 的 icon 名，默认不适用二级菜单的 icon。
access:string 权限配置，需要预先配置权限
hideChildrenInMenu:true 用于隐藏不需要在菜单中展示的子路由。
hideInMenu:true 可以在菜单中不展示这个路由，包括子路由。
hideInBreadcrumb:true 可以在面包屑中不展示这个路由，包括子路由。
headerRender:false 当前路由不展示顶栏
footerRender:false 当前路由不展示页脚
menuRender: false 当前路由不展示菜单
menuHeaderRender: false 当前路由不展示菜单顶栏
parentKeys: string[] 当此节点被选中的时候也会选中 parentKeys 的节点
flatMenu 子项往上提，只是不展示父菜单

看点1：routes.ts文件

export const page404 = {
  component: './404',
};
const routes = [
  {
    path: '/',
    component: '../layouts/index',
    menu: {
      flatMenu: true,  // 不需要展示自己，只展示 children
      menuRender: false,
    },
    routes: [
      {
        path: '/login',
        layout: false,
        lacale: false,
        component: './user/login',
      },
     
      {
        path: '/personnel',
        name: '人员管理',
        icon: 'icon-renyuanguanli',
        component: './personnel',
        routes: [
          {
            path: 'org-structure',
            name: '组织架构',
            icon: 'crown',
            hideInMenu: true,
            component: './personnel/org-structure',
          },
          {
            path: 'role-list',
            name: '角色',
            hideInMenu: true,
            component: './personnel/role-list',
          },
        ],
      },
      {
        path: '/service-type',
        name: '服务管理',
        icon: 'icon-zhihuishenghuo--fuwuguanli',
        component: './service-type',
        local: false,
      },
      page404,
    ],
  },
];
export default routes;

补充下loopMenuItem代码段

const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  menus.map(({ icon, children, ...item }) => {
    return {
      ...item,
      icon: icon && IconMap[icon as string],
      children: children && loopMenuItem(children),
    };
  });

上面增加了外层layout路由，配置的真实菜单路由变成了二级菜单。由于antd pro默认不支持二级菜单显示icon。导致菜单icon无法显示。根据官方说明做如下处理来解决此问题。

看点2：在菜单中使用iconFont

要使用 iconFont 的图标必须满足两个条件

传入一个 iconFont 的 url 链接
icon 命名必须以 icon-开头

src/app.tsx中配置(重点看iconfontUrl字段)

export const layout = ({
  initialState,
}: {
  initialState: {
    settings?: LayoutSettings;
    menuData: Promise<BasicLayoutProps>;
  };
}): BasicLayoutProps => {
  return {
    menuDataRender: () => loopMenuItem(routes),
    rightContentRender: () => <RightContent></RightContent>,
    onPageChange: () => {
      document.title = 'xx管理系统';
    },
    iconfontUrl: '//at.alicdn.com/t/font_3350681_5e1hv0rcw3.js', // 阿里图标地址
    title: 'xx管理系统',
    ...initialState?.settings,
  };
};

看点3：iconfontUrl的连接需要在iconfont官网中获取，如下图。

把需要的icon放到项目下，配置上iconfontUrl后，在我的项目的图标上点击复制代码，routes配置icon:xxx就能显示出来了。