我已经创建了一个 React 应用程序并且我正在使用 Ant-Design (antd)，在我的一个项目文件中，我想使用该标签，但我不能。显然这是 ANT V4 上的问题。
我正在使用以下导入语句；
import { Icon } from 'antd',
并收到以下错误：
Attempted import error: 'Icon' is not exported from 'antd'.
我知道我们可以导入每个图标，然后将其用作标签，但是如果我们有多个图标，它会给出很长的代码
在 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>
管理图标的整个方式在 v4 中发生了变化，从字体到 SVG。对于字体，导入一个或多个图标没有区别，因为无论哪种方式，您都在下载整个字体。使用 SVG，每个图标都有自己的module。这样做的好处是让打包程序可以摆脱未使用的图标，从而减少下载大小。
但是，这确实意味着必须单独导入它们。
您可能可以通过创建自己的库文件而逃脱，例如
// 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';
一个文件中有很多，但至少它只是一个文件。
解决者：
我正在使用 @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'} />