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

reactjs create-react-app antd
Mushood Hanif picture Mushood Hanif · Mar 14, 2020 · Viewed 12.3k times · Source

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

Agney picture Agney · Mar 15, 2020

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

Related questions

antd design select placeholder issues

I am using antd design in my React app. Here's a code snippet where I am facing the issues : <Select showSearch optionFilterProp = "children" placeholder = "Select Company" value = "{this.state.company}" name = "company" onSelect = "{this.handleCompanyChange}" > Now it shows …

Read More
Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON Additionally I am using create-react-app and would like to avoid setting up any server config. In my client code I am trying …

Read More
How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More