尝试导入错误：“图标”未从“antd”导出答案

【问题标题】：Attempted import error: 'Icon' is not exported from 'antd'尝试导入错误：“图标”未从“antd”导出
【发布时间】：2020-06-26 11:55:09
【问题描述】：

我使用“create-react-app”创建了一个反应应用程序，在我的一个项目文件中，我使用了以下导入语句；

import { Icon } from 'antd',

并收到以下错误：

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

不确定是什么问题。请帮忙。

【问题讨论】：

【解决方案1】：

在将 Ant Design 版本升级到 v4 时，主要的重大变化之一是 Icon 不再从 antd 包中导出。

也不要使用基于字符串的图标引用，例如：

// Before
<Icon type="smile" />

在 v4 中：

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

<SmileOutlined />

还有一个Icon 导出，但它来自包@ant-design/icons 而不仅仅是antd。这个Icon 导出可用于添加自定义图标。

【讨论】：

我已经使用“npm i -D antd”安装了 ant design 包，并且这个导入语句“import { Icon} from '@ant-design/icons' 不起作用。我应该使用不同的命令删除和安装包？我应该怎么做？
是的，谢谢，您的解决方案有效，我必须单独执行npm i -D @ant-design/icons，然后必须单独导入每个图标。谢谢你的帮助兄弟。
-D 用于安装开发人员依赖项，除非您打算将其添加为库，否则不需要它
我在学习教程时尝试使用来自 Antd 的图标。当我导入 LoadingOutlined 而不是 Icon 时为我工作。感谢您指出方向！

【解决方案2】：

您的导入错误。

您使用的是 v4 吗？

import Icon from '@ant-design/icons';

【讨论】：

我正在使用 v4，但我使用“npm i -D antd”安装了 ant design，并且我尝试了这个 import 语句，但它不起作用。我该怎么办？
你是否也安装了https://www.npmjs.com/package/@ant-design/icons？
不，我没有，但是我使用的是 ant-design 版本：4.0.2，所以它应该已经打包在里面了。不是这样吗？ @JaLe
是的，你是对的。你是想使用一些图标，还是什么？
@MushoodHanif 这是错误的。在 ant 版本 4 中，您应该使用 import { SmileOutlined } from '@ant-design/icons'; -> <SmileOutlined style={{ color: 'rgba(0,0,0,.25)' }} />

【解决方案3】：

在 v4 中，图标是默认导出，所以这样做

import Icon from '@ant-design/icons';

而不是

import {Icon} from 'antd';

你可能还需要npm install @ant-design/icons --save-dev

【讨论】：

为什么 --save-dev 而不是 --save，这在 prod 代码中也是需要的，不是只在 dev env 中吗？
取决于您的构建脚本 - 如果脚本在开发模式下编译和构建并部署，您将不会在生产中使用 npm。如果您在生产中使用一些 es6 模块或在生产服务器中构建捆绑包——也许——保存是正确的方法。但取决于您的设置。

【解决方案4】：

我通过运行 npm install -g 解决了这个问题，这可能不是最好的方法；如果需要，将审查和重构。

【讨论】：

【解决方案5】：

我添加了“@ant-design/compatible”，它对我有用

yarn add @ant-design/compatible --save-dev

【讨论】：