Warning: [antd: Icon] Empty Icon
先查看antd版本
npm info antd
antd@4.9.4 | MIT | deps: 42 | versions: 552
发现antd版本为V4
V4更新后应如Icon的方法也更新了。官方文档点击此处
首先安装图标组件包、有的可能已经默认安装
npm install --save @ant-design/icons
下面为官方文档中的解决办法
图标升级#
在 antd@3.9.0
中,我们引入了 svg 图标(为何使用 svg 图标?)。使用了字符串命名的图标 API 无法做到按需加载,因而全量引入了 svg 图标文件,这大大增加了打包产物的尺寸。在 4.0 中,我们调整了图标的使用 API 从而支持 tree shaking,减少 antd 默认包体积约 150 KB(Gzipped)。
旧版 Icon 使用方式将被废弃:
import { Icon, Button } from 'antd';
const Demo = () => (
<div>
<Icon type="smile" />
<Button icon="smile" />
</div>
);
4.0 中会采用按需引入的方式:
import { Button } from 'antd';
// tree-shaking supported
- import { Icon } from 'antd'; //弃用
+ import { SmileOutlined } from '@ant-design/icons';
const Demo = () => (
<div>
- <Icon type="smile" /> //弃用
+ <SmileOutlined />
<Button icon={<SmileOutlined />} />
</div>
);
// or directly import
import SmileOutlined from '@ant-design/icons/SmileOutlined';
你将仍然可以通过兼容包继续使用:
import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';
const Demo = () => (
<div>
<Icon type="smile" />
<Button icon="smile" />
</div>
);
这样就可以正常使用啦