antd 使用Icon在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命

import error: 'Icon' is not exported from 'antd' 引入图标报错 blog.csdn.net/qq_37233023…

开发小白菜 2020-04-22 11:48:50 1542 收藏 1 分类专栏： antd 版权 import { Icon } from 'antd',

这是antd v3到v4升级导致的，可参考更新文档https://ant.design/docs/react/migration-v4-cn#Icon-upgrade

图标升级#

在 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>
    );

参考链接：

ant.design/docs/react/…