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

Question

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

import { Icon } from 'antd',

并收到以下错误：

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

不知道是什么问题。请帮忙。

Answer 1

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

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

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

在 v4 中：

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

<SmileOutlined />

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

文档更新 日志

Answer 2

在 v4 中，图标是默认导出的，所以也是

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

代替

import {Icon} from 'antd';

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

Answer 3

你的导入是错误的。

查看蚂蚁文档：https : //ant.design/components/icon/

你用的是v4吗？

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