CODEWITHSUNDEEP
javascriptreactjsantd
Aminoz
Aminoz

Reputation: 31

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

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

Upvotes: 0

Views: 5881

Answers (4)

camloken
camloken

Reputation: 141

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 component 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>

Upvotes: 3

Rikesh Lal Shrestha
Rikesh Lal Shrestha

Reputation: 111

Solved by:

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

File DynamicIcon.js:

import loadable from "@loadable/component";

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'} />

Upvotes: 0

Michael Landis
Michael Landis

Reputation: 1214

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.

Upvotes: 0

keikai
keikai

Reputation: 15146

For icon import in v4:

import from @ant-design/icons

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

<SmileOutlined />

or using the compatibility pack

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

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

Upvotes: 2

Related Questions