import error: 'Icon' is not exported from 'antd' 引入图标报错

import { Icon } from 'antd',

import error: 'Icon' is not exported from 'antd' 引入图标报错_第1张图片

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

图标升级#

在 [email protected] 中,我们引入了 svg 图标(为何使用 svg 图标?)。使用了字符串命名的图标 API 无法做到按需加载,因而全量引入了 svg 图标文件,这大大增加了打包产物的尺寸。在 4.0 中,我们调整了图标的使用 API 从而支持 tree shaking,减少 antd 默认包体积约 150 KB(Gzipped)。

旧版 Icon 使用方式将被废弃:

import { Icon, Button } from 'antd';

const Demo = () => (
  
);

4.0 中会采用按需引入的方式:

  import { Button } from 'antd';

  // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    
- +
); // or directly import import SmileOutlined from '@ant-design/icons/SmileOutlined';

你将仍然可以通过兼容包继续使用:

import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';

const Demo = () => (
  
);

参考链接:

https://ant.design/docs/react/migration-v4-cn#Icon-upgrade

https://stackoverflow.com/questions/61021168/import-error-icon-is-not-exported-from-antd

你可能感兴趣的:(antd)