I have created a react app and I'm using Ant-Design (antd), in one of my project files, I want to use the tag but I can't. Apparently this is a problem on the ANT V4.

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

is there a solution to use this tag in v4?

I know that we can import each icon and then use it as a tag but it gives a very long code if we have several icons

I have created a react app and I'm using Ant-Design (antd), in one of my project files, I want to use the tag but I can't. Apparently this is a problem on the ANT V4.

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

is there a solution to use this tag in v4?

I know that we can import each icon and then use it as a tag but it gives a very long code if we have several icons

• javascript
• reactjs
• antd

4 Answers 4

In React 16.0 and above you don't need an external library. You can just use React.lazy()

import React, { Suspense } from 'react'

// Create a dynamic ponent name -- must start with an uppercase
const AntIcon = React.lazy(() => import(`@ant-design/icons/es/icons/${props.type}.js`))

// Must use Suspense with a fallback item, or the icon won't load
<Suspense fallback={<div>Loading...</div>}>
  <AntIcon
    onClick={props.onClick}
    style={{ ...props.style, fontSize: `${props.size}px`, color: props.color }}
  />
</Suspense>

For icon import in v4:

import from @ant-design/icons

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

<SmileOutlined />

or using the patibility pack

import { Icon } from '@ant-design/patible';

<Icon type="smile" />

Guessing the second one fit your demand.

You can check the upgrade document from v3 to v4 for more information about this.

The entire way of managing icons changed in v4, from fonts to SVG. With fonts, it didn't make a difference if you import one or many icons, because either way you're downloading the entire font. With SVG, each icon has its own module. This has the advantage of letting bundlers shake out the icons that aren't being used, reducing the download size.

It does, however, mean having to import them individually.

You might be able to get away with creating your own library file, with something like

// my-icons.js
import {
  Icon1,
  Icon2,
  Icon3,
  ...
} from '@ant-design/icons';

const myIcons = {
  Icon1,
  Icon2,
  Icon3,
  ...
};

export default myIcons;

// MyComponent.jsx
import Icons from './my-icons';

It's a lot in one file, but at least it's just one file.

Solved by:

I am using @loadable/ponent and by created a dynamic ponent that passes type

File DynamicIcon.js:

import loadable from "@loadable/ponent";

const DynamicIcon = loadable(props => 
import(`@ant-design/icons/es/icons/${props.type}.js`)
.catch(err => import(`@ant-design/icons/es/icons/WarningOutlined.js`)))

export default DynamicIcon;

And invoke the icon as before v3:

<DynamicIcon type={'TagOutlined'} />