ant design pro 二级菜单_浅谈Ant Design Pro 菜单自定义 icon

Ant Design Pro 是一个非常流行的企业级 UI 设计语言和 React 组件库，它提供了丰富的组件和模板，可以帮助开发者快速搭建高质量的企业级应用。

在 Ant Design Pro 中，菜单是非常重要的一部分，它可以帮助用户快速浏览和访问系统中的各个功能模块。Ant Design Pro 的菜单支持多级嵌套，可以根据需要进行自定义。

如果想给 Ant Design Pro 菜单中的二级菜单添加自定义的 icon，可以按照以下步骤进行操作：

1. 在项目中引入需要使用的 icon。

在 Ant Design Pro 中，可以使用 Ant Design 自带的 icon，也可以使用自定义的 icon。如果要使用自定义的 icon，需要在项目中引入需要使用的 icon。

2. 在菜单配置中指定 icon。

在菜单配置中，可以指定菜单的 icon。对于二级菜单，需要在菜单配置的 children 属性中指定 icon。例如：

{
  path: '/dashboard/analysis',
  name: '分析页',
  icon: 'dashboard',
  component: './Dashboard/Analysis',
  children: [
    {
      path: '/dashboard/analysis/realtime',
      name: '实时数据',
      icon: 'line-chart',
      component: './Dashboard/Analysis/Realtime',
    },
    {
      path: '/dashboard/analysis/offline',
      name: '离线数据',
      icon: 'bar-chart',
      component: './Dashboard/Analysis/Offline',
    },
  ],
},

在上述代码中，分析页的二级菜单实时数据和离线数据分别指定了 line-chart 和 bar-chart 作为 icon。

3. 在菜单组件中使用 icon。

在 Ant Design Pro 中，菜单组件使用的是 antd 的 Menu 组件。如果要在菜单中显示 icon，需要在 Menu.Item 组件中使用 icon 属性。例如：

<Menu.Item key={menuItem.path}>
  <Link to={menuItem.path}>
    {menuItem.icon && <Icon type={menuItem.icon} />}
    <span>{menuItem.name}</span>
  </Link>
</Menu.Item>

在上述代码中，如果 menuItem 中包含 icon 属性，就会在菜单项的左侧显示对应的 icon。

通过以上步骤，就可以在 Ant Design Pro 的菜单中为二级菜单添加自定义的 icon。