如何在V4中使用Ant-design / icons中的图标

问题描述

我试图制作一个菜单，所以我创建了一个menuList来使用getMenuNodes（）配置菜单，但是Ant框架已从v3升级到v4，图标方法已更改。他们现在使用icon={<PieChartOutlined />}代替icon='PieChartOutlined'，一切正常，图标区域立即显示单词<PieChartOutlined />。我不知道为什么会发生，请帮助我解决这个问题。

left-navigation.js

import React,{ Component } from 'react';
import { Link } from 'react-router-dom';
import logo from '../../assets/images/logo.png';
import './index.less';
import { Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
import menuList from '../../config/menuConfig';
const { SubMenu } = Menu;
export default class LeftNav extends Component {
  getMenuNodes = menuList => {
    return menuList.map(item => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={item.icon}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
    });
  };
  render() {
    return (
      <div className="left-nav">
        <Link to="./" className="left-nav-header">
          <img src={logo} alt="" />
          <h1>Backend System</h1>
        </Link>
        <Menu
          mode="inline"
          theme="dark"
        >
          {this.getMenuNodes(menuList)}
        </Menu>
      </div>
    );
  }
}

menuList.js

const menuList = [
  {
    title: 'Home',key: '/home',icon: '<PieChartOutlined />',},{
    title: 'Item',key: '/products',children: [
      {
        title: 'Category Control',key: '/category',{
        title: 'Product Control',key: '/product',],{
    title: 'User Control',key: '/user',{
    title: 'Role Control',key: '/role',{
    title: 'Diagram',key: '/charts',children: [
      {
        title: 'Bar',key: '/charts/bar',{
        title: 'Line',key: '/charts/line',{
        title: 'Pie',key: '/charts/pie',];
export default menuList;

解决方法

您要传递字符串'<PieChartOutlined />'，需要直接传递组件。

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

和：

      {
        title: 'Product Control',key: '/product',icon: <PieChartOutlined />,},

如果尚未安装，则需要安装ant-design / icons：

npm install --save @ant-design/icons

,

由于以前版本的性能原因，antd团队使用了摇树来使用图标。详细信息，您可以检查https://ant.design/docs/react/migration-v4