Question

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

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

import { Icon } from 'antd',

，并收到以下错误：

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

有没有在v4中使用此标记的解决方案？

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

Answer 1

在 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 2

对于在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 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'} />

导入错误：未从“ antd”导出“ Icon”

有没有在v4中使用此标记的解决方案？

4 个答案: