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

Question

I have created a react app using 'create-react-app' and in one of my project files, i'm using the following import statement;

import { Icon } from 'antd',

and receiving the following error:

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

not sure what the issue is. please help.

Answer 1

On upgrading the version of Ant Design to v4, one of the major breaking changes have been that Icon is no longer exported from antd package.

Also instead of having string based icon references like:

// Before
<Icon type="smile" />

In v4:

import { SmileOutlined } from '@ant-design/icons';

<SmileOutlined />

There is still an Icon export, but that is from the package @ant-design/icons instead of just antd. This Icon export can be used for adding custom icons.

Docs Changelog

Answer 2

In v4, the icons are a default export, so do

import Icon from '@ant-design/icons';

instead of

import {Icon} from 'antd';

You might also need to do npm install @ant-design/icons --save-dev