Warning: [antd: Icon] Empty Icon

最新推荐文章于 2022-10-27 15:37:53 发布
最新推荐文章于 2022-10-27 15:37:53 发布
阅读量5.9k 收藏 3
点赞数 3
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23956389/article/details/111518176
版权
Warning: [antd: Icon] Empty Icon

先查看antd版本

npm info antd
antd@4.9.4 | MIT | deps: 42 | versions: 552

发现antd版本为V4

V4更新后应如Icon的方法也更新了。官方文档点击此处

首先安装图标组件包、有的可能已经默认安装

npm install --save @ant-design/icons

更新内容链接

下面为官方文档中的解决办法

图标升级
最低0.47元/天 解锁文章
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1481
antd-react 组件库工作以来的总结
import error: 'Icon' is not exported from 'antd' 引入图标报错
qq_37233023的博客
04-22 1万+
这是antd v3到v4升级导致的，可参考更新文档https://ant.design/docs/react/migration-v4-cn#Icon-upgrade
‘Icon‘ is not exported from ‘antd‘.
furfur-jiang的博客
10-17 3590
这是antd v3到v4升级导致的 官方： 从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。 引入具体Icon 页面定义及使用 import { HomeOutlined, SettingFilled, SmileOutlined, SyncOutlined, LoadingOutlined, } from '@ant-design/icons'; ReactDOM.render( <div className=
import error: ‘Icon‘ is not exported from ‘antd‘. 引入图标报错
向往的那片海洋
03-21 3007
问题报错： Attempted import error: 'Icon' is not exported from 'antd'. 问题原因： Ant Design 从 v3 升级到 v4 导致 图标升级（点击可查看文档） 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 a
Antd Icon引入错误
qq_43473072的博客
07-27 2213
错误：引入时主要错误 //import {Icon} from 'antd' Attempted import error: 'Icon' is not exported from 'antd'. 原因： antd 版本问题4.0不向下兼容 ，需要特定引入 解决： import { Button } from 'antd'; import { Icon } from '@ant-design/compatible'; 错误： Module not found: Can't resolve '@ant-
antd-vue表格二次封装定制化
weixin_44191425的博客
08-16 982
index.vue <template> <div class="table"> <a-table :row-selection=" isRowSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange, } : null .
Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！
IT博客-wusheng_z
10-27 1104
Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！
React icon运用遇到报错 error: 'GlobalIcon' is not exported from './statics/iconfont/iconfont'.
zhangzhuo1130的博客
04-25 905
报错如下 报错原因:是因为我的在下载新的icon.svg导入的时候替换掉了原来的iconfont.js。后来下载的iconfont.js是老版本的，导入到新的项目里面就会有报错，需要将js文件更新成新版本的写法。就是如下面所示内容。注意是开头两行 import {createGlobalStyle} from 'styled-components'; export const GlobalIc...
Ant Design Pro引入svg文件（非icon）
虚怀若愚
12-25 3445
文章目录前言路由和菜单配置代理配置页面和组件配置启动http服务最终效果 前言 传统的基于C/S架构的自动化监控系统随着web技术的发展也日新月异，目前比较常见的做法是监控页面图作为svg嵌入web浏览器，通过浏览器监控刀闸状态和开关位置，本文提供一种实现方法。 版本如下： Ant Design Pro: 脚手架2.0 Python：2.7.16 路由和菜单配置 路由和菜单配置: //...
Ant Design Pro 4 动态菜单icon丢失解决办法
IT侠客行的博客
09-27 1248
最近在开发人事管理系统，其中菜单是需要动态渲染，针对不同角色授权不同的菜单权限。 路由由后端返回，格式如下： [ { "path": "/", "name": "dashboard", "icon": "DesktopOutlined", "component": "./dashboard/workplace", }, { "name": "management", "path": "/auth", "icon": "TeamOutlined", "children": [ { "name": ..
angular 11 --- ng generate记录 以及 has no exported member ‘NgZorroAntdModule‘ 解决方案
dlh918的博客
02-24 4080
话不多说，先上package.json，以下是我软件的版本号 { "name": "project-name", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true,
react引用Ant Design组件遇到的坑（table）index.js:1 Warning: Each child in a list should have a unique “key“
qq_43690438的博客
12-01 1573
打印台报错，百度了一下解决办法，参考博客或者参考文章最后。 如图： 表格分页居中设置（在table组件里面写上，bottomCenter表示表格下方居中，6条数据分页） pagination={{ position: ['bottomCenter'], pageSize: 6 }} 表格中添加组件（例如按钮） 在columns最后一项里面写组件：利用 render：（）=> 箭头函数返回组件 代码： 分页，报错解决方式如图：（rowKey为每一项的唯一字段名） 有问题欢迎指出~ ..
Warning: Icon should have `type` prop or `component` prop or `children`.
weixin_41992772的博客
07-11 1万+
这个问题我排除很久在它GitHub代码里面找到了 但是也木有明确的解决 没办法只又自己一遍一遍的进行测试了 后来发现这个问题的话要 在前面进行判断空 要给一个值我的是这样解决的 有其他思路可以一起讨论 qq:3092292223 ...
react项目中遇到的bug
热门推荐
感恩、奋进、自信
01-10 2万+
1、react-router使用时，在浏览器出错：Attempted import error: 'Link' is not exported from 'react-router   源代码如下：  import React, { Component } from 'react'; import {Menu} from 'semantic-ui-react'; import 'seman...
【react-router4.0+】版本导入browserHistory失效（'BrowserHistory' is not exported from 'react-router'）
qq_40610760的博客
09-03 1万+
当在js文件中引用： import {BrowserHistory} from 'react-router' 报错： ./src/pages/store.js Attempted import error: 'BrowserHistory' is not exported from 'react-router'. react-router4.0官方文档里已经废弃了：Brow...
Attempted import error: 'Link' is not exported from 'react-router'.
祈澈菇凉
11-20 7075
运行react项目的时候，会报出这样的错误 Attempted import error: 'Link' is not exported from 'react-router'. 解决办法 1:安装依赖 npm install react-router-dom 2:在要使用的组件里面引入 import { BrowserRouter as Router, Rout...
warning.js:7 Warning: [antdv: Table] Each record in dataSource of table should have a unique `key`
qq_42580876的博客
12-04 9839
使用 Ant Design组件的时候报key警告，这由于columns中定义的默认key值在返回的数据中没有当前的这个字段造成的，一个是使用rowKey默认指定一个对应的键值对，或者使用类似v-for循环中的下标index来代替 :rowKey="(record,index)=>{return index}" ...
简化操作：antd与Vue离线使用的解决方案
资源摘要信息:"antd是一个由阿里巴巴团队开发的基于React的前端UI框架，它提供了一系列美观、高质量的组件以帮助开发者快速构建前端界面。ANTD VUE版本则是该框架为Vue.js提供的一套UI组件库，使得Vue.js开发者也...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值