25

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.

Mushood Hanif
  • 501
  • 1
  • 5
  • 17

5 Answers5

34

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

Agney
  • 18,522
  • 7
  • 57
  • 75
  • i've installed the ant design package using "npm i -D antd", and this import statement, "import { Icon } from '@ant-design/icons' is not working. should i remove and install the package with a different command ? how should i go about it ? – Mushood Hanif Mar 15 '20 at 08:05
  • 1
    Yes, thank you, your solution worked, i had to separately do `npm i -D @ant-design/icons` and then had to import each icon separately. thank you for your help bro. – Mushood Hanif Mar 15 '20 at 08:29
  • `-D` is for installing a developer dependency, unless you intend to add it as a library, you don't require it – Agney Mar 15 '20 at 08:29
  • I was trying to use a Icon from Antd while following an tutorial. Worked for me when I imported `LoadingOutlined` instead of `Icon`. Thanks for pointing out the direction! – arfat619 Jan 01 '21 at 18:58
18

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

Jkarttunen
  • 6,764
  • 4
  • 27
  • 29
  • 2
    why --save-dev instead of just --save, this is needed in prod code as well isn't it instead of just in dev env ? – vikramvi Oct 16 '20 at 10:29
  • Depends on your build scripts - if scripts are compiled and build in dev mode, and deployed, you wont be using npm in production. If you use some es6 modules on production or build the bundles in production server - maybe —save is the right way. But depends on your setup. – Jkarttunen Oct 29 '20 at 08:55
6

Your import is wrong.

Check ant documentation: https://ant.design/components/icon/

Are you using v4?

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

JaLe
  • 409
  • 3
  • 13
  • I am using v4 but i've installed ant design using "npm i -D antd", and i've tried this import statement and it doesn't work. how should i go about it ? – Mushood Hanif Mar 15 '20 at 08:03
  • Did you install also `https://www.npmjs.com/package/@ant-design/icons`? – JaLe Mar 15 '20 at 08:04
  • no i did not, however i am using ant-design version: 4.0.2, so it should come packaged inside already. is that not the case ? @JaLe – Mushood Hanif Mar 15 '20 at 08:11
  • Yes, you are right. Are you trying to use some icon, or what? – JaLe Mar 15 '20 at 08:17
  • Yes, 2 actually. one for the user ``and one for the password `` also i've tried `npm i -D @ant-design/icons` but it still gives the same error. – Mushood Hanif Mar 15 '20 at 08:22
  • 1
    @MushoodHanif It is wrong. In ant version 4. you should use `import { SmileOutlined } from '@ant-design/icons';` -> `` – JaLe Mar 15 '20 at 08:27
  • I've found the solution, will be sharing it. thanks for your help bro. – Mushood Hanif Mar 15 '20 at 08:28
2

i added '@ant-design/compatible' it works for me

yarn add @ant-design/compatible --save-dev
Atchutha rama reddy Karri
  • 1,434
  • 13
  • 16
-7

I resolved this by running npm install -g, probably not the best approach; will review and refactor if needed.

Dino Don
  • 1