如何在 V4 中使用 Ant-design/icons 中的图标
how to use icon in Ant-design/icons with V4
我尝试制作一个菜单,所以我创建了一个 menuList 以使用 getMenuNodes() 配置菜单,但是 Ant 框架已从 v3 升级到 v4,图标方法已更改。他们现在使用 icon={<PieChartOutlined />}
而不是 icon='PieChartOutlined'
,一切正常,图标区域现在显示 <PieChartOutlined />
这个词。我不知道为什么会这样,请帮我解决这个问题。
左-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',
icon: '<PieChartOutlined />',
children: [
{
title: 'Category Control',
key: '/category',
icon: '<PieChartOutlined />',
},
{
title: 'Product Control',
key: '/product',
icon: '<PieChartOutlined />',
},
],
},
{
title: 'User Control',
key: '/user',
icon: '<PieChartOutlined />',
},
{
title: 'Role Control',
key: '/role',
icon: '<PieChartOutlined />',
},
{
title: 'Diagram',
key: '/charts',
icon: '<PieChartOutlined />',
children: [
{
title: 'Bar',
key: '/charts/bar',
icon: '<PieChartOutlined />',
},
{
title: 'Line',
key: '/charts/line',
icon: '<PieChartOutlined />',
},
{
title: 'Pie',
key: '/charts/pie',
icon: '<PieChartOutlined />',
},
],
},
];
export default menuList;
由于上个版本的性能原因,antd团队申请tree-shaking使用icon。更详细的可以查看https://ant.design/docs/react/migration-v4
你传递的是'<PieChartOutlined />'
的字符串,需要直接传递组件
import { PieChartOutlined } from '@ant-design/icons';
和:
{
title: 'Product Control',
key: '/product',
icon: <PieChartOutlined />,
},
如果您还没有安装 ant-design/icons,则需要安装:
npm install --save @ant-design/icons
我尝试制作一个菜单,所以我创建了一个 menuList 以使用 getMenuNodes() 配置菜单,但是 Ant 框架已从 v3 升级到 v4,图标方法已更改。他们现在使用 icon={<PieChartOutlined />}
而不是 icon='PieChartOutlined'
,一切正常,图标区域现在显示 <PieChartOutlined />
这个词。我不知道为什么会这样,请帮我解决这个问题。
左-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',
icon: '<PieChartOutlined />',
children: [
{
title: 'Category Control',
key: '/category',
icon: '<PieChartOutlined />',
},
{
title: 'Product Control',
key: '/product',
icon: '<PieChartOutlined />',
},
],
},
{
title: 'User Control',
key: '/user',
icon: '<PieChartOutlined />',
},
{
title: 'Role Control',
key: '/role',
icon: '<PieChartOutlined />',
},
{
title: 'Diagram',
key: '/charts',
icon: '<PieChartOutlined />',
children: [
{
title: 'Bar',
key: '/charts/bar',
icon: '<PieChartOutlined />',
},
{
title: 'Line',
key: '/charts/line',
icon: '<PieChartOutlined />',
},
{
title: 'Pie',
key: '/charts/pie',
icon: '<PieChartOutlined />',
},
],
},
];
export default menuList;
由于上个版本的性能原因,antd团队申请tree-shaking使用icon。更详细的可以查看https://ant.design/docs/react/migration-v4
你传递的是'<PieChartOutlined />'
的字符串,需要直接传递组件
import { PieChartOutlined } from '@ant-design/icons';
和:
{
title: 'Product Control',
key: '/product',
icon: <PieChartOutlined />,
},
如果您还没有安装 ant-design/icons,则需要安装:
npm install --save @ant-design/icons