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

Ant Design Pro 是一个企业级 UI 设计语言和 React 组件库，提供了丰富的组件和模板，可以帮助开发者快速构建现代化的 Web 应用。在 Ant Design Pro 中，菜单是一个非常重要的组件，可以用来实现应用的导航和路由功能。同时，Ant Design Pro 也提供了自定义菜单 icon 的功能，可以让开发者更好地定制自己的应用。

在 Ant Design Pro 中，菜单的 icon 可以通过修改菜单项的 icon 属性来实现。例如，如果我们想要给一个菜单项添加一个自定义的 icon，可以按照如下方式进行：

{
  path: '/dashboard',
  name: 'Dashboard',
  icon: 'dashboard', // 默认使用 Ant Design 的 icon
  // ...
},
{
  path: '/custom',
  name: 'Custom',
  icon: <Icon type="smile" />, // 使用自定义 icon
  // ...
}

在上面的代码中，我们可以看到，我们可以使用 Ant Design 提供的 icon 字符串，也可以使用自定义的 icon 组件，只需要将其作为 icon 属性的值即可。

需要注意的是，在使用自定义 icon 组件时，我们需要先引入对应的 icon 组件，例如：

import { Icon } from '@ant-design/icons';
import { SmileOutlined } from '@ant-design/icons';

const IconSmile = props => <Icon component={SmileOutlined} {...props} />;

然后再将其作为菜单项的 icon 属性的值即可：

{
  path: '/custom',
  name: 'Custom',
  icon: <IconSmile />,
  // ...
}

这样就可以实现自定义菜单 icon 的功能了。同时，Ant Design Pro 还提供了丰富的 icon 组件，开发者可以根据自己的需求选择使用。