导入错误：“图标”未从“antd”导出

Question

我已经创建了一个反应应用程序，并且我正在使用 Ant-Design (antd)，在我的一个项目文件中，我想使用该标签，但我不能。显然这是 ANT V4 的问题。

我正在使用以下导入语句；

import { Icon } from 'antd',

并收到以下错误：

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

---

有没有办法在v4中使用这个标签？

---

我知道我们可以导入每个图标，然后将其用作标签，但如果我们有多个图标，它会给出很长的代码

Answer 1

对于 v4 中的图标导入：

从 @ant-design/icons

导入

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

<SmileOutlined />

或使用兼容包

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

<Icon type="smile" />

猜测第二个符合您的需求。

---

您可以查看upgrade document from v3 to v4 了解更多信息。

Answer 2

在 React 16.0 及更高版本中，您不需要外部库。你可以只使用 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>

Answer 3

在 v4 中管理图标的整个方式发生了变化，从字体到 SVG。对于字体，如果您导入一个或多个图标并没有什么不同，因为无论哪种方式您都在下载整个字体。使用 SVG，每个图标都有自己的模块。这样做的好处是可以让捆绑程序摆脱未使用的图标，从而减少下载大小。

但是，这确实意味着必须单独导入它们。

您也许可以通过创建自己的库文件来摆脱困境，例如

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

一个文件有很多，但至少它只是一个文件。

Answer 4

解决者：

我正在使用@loadable/component 并创建了一个传递类型的动态组件

文件 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;

并像 v3 之前一样调用图标：

<DynamicIcon type={'TagOutlined'} />