import error: ‘Icon‘ is not exported from ‘antd‘. Import icon error

Issues an error ：

Attempted import error: 'Icon' is not exported from 'antd'.

Question why ：

Ant Design from v3 Upgrade to v4 Lead to

Icon upgrade （ Click to view the document ）

stay [email protected] in , We introduced svg Icon （ Why use svg Icon ？）. Using a string named icon API Can't load on demand , Therefore, the total introduction of svg Icon file , This greatly increases the size of the packed product . stay 4.0 in , We adjusted the use of icons API To support tree shaking, Reduce antd The default package size is about 150 KB ( Gzipped ).

Old edition Icon The way of use will be abandoned ：

import {
     Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0 On demand introduction will be adopted in ：

  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';

You will still be able to use it through compatible packages ：

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

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Solution ：

We can solve it through the solution described in the document , However, the following errors will still be reported after the execution ：

Module not found: Can't resolve '@ant-design/compatible'

We can solve it with the following order ：

npm add @ant-design/compatible