技術標籤：reactreact

Warning: [antd: Icon] Empty Icon

先檢視antd版本

npm info antd
[email protected] | MIT | deps: 42 | versions: 552

發現antd版本為V4

V4更新後應如Icon的方法也更新了。官方文件點選此處

首先安裝圖示元件包、有的可能已經預設安裝

npm install --save @ant-design/icons

更新內容連結

下面為官方文件中的解決辦法

圖示升級#

在 [email protected] 中，我們引入了 svg 圖示（為何使用 svg 圖示？

舊版 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>
);

這樣就可以正常使用啦