关于antd升级为4.0 不再内置icon组件， 循环渲染动态icon的解决方案

最新推荐文章于 2024-04-09 17:53:27 发布
最新推荐文章于 2024-04-09 17:53:27 发布
阅读量1.9k 收藏 2
点赞数 2
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43990297/article/details/114927564
版权

从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。
在项目开发中，经常会有需求是通过数据循环渲染出动态icon，比如后台项目的侧边栏等，如果你是4.0以前版本的，就不用看了， 此处只针对4.0版本的antd

写一个方法，用来生成不同的icon

import * as Icons from "@ant-design/icons";

const renderIcon = (iconName) => {
  return React.createElement(Icons[iconName])
}
喵大叔、
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-icon:React的图标组件
05-04
React图标 React应用程序中图标的简单组件。 安装 npm install --save react-icon 用法 const React = require ( 'react' ) ; const Icon = require ( 'react-icon' ) ; const StarCounter = React . createClass ( { render ( ) { return ( < div> < span> This user have { this . props . count } < / span > < Icon xss=removed> < / div > ) ; } } ) ; module . exports = StarCounter ; 默认情况
antd design pro v4动态加载菜单，解决icon丢失问题
weixin_45738401的博客
05-11 1707
这里写自定义目录标题antd design pro v4动态加载菜单，解决icon丢失问题前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 antd desi
react17+antd4 动态渲染导航菜单中的icon
最新发布
weixin_45871977的博客
04-09 389
react17+antd4 动态渲染导航菜单栏中的icon
react使用antd4来map循环渲染menu.item中icon
个人博客
03-24 2733
学习自 https://blog.csdn.net/qq_41522343/article/details/112863231 antd4中<Menu.Item icon={}>icon属性跟antd3中不一样，是节点属性，可以使用React.createElement方法来创建节点。 首先导入 import * as Icon from “@ant-design/icons”; 然后有了三种思路 geticon = (iconname) =>{ return React.cr
Antd design pro 网站favicon.ICO图标 网页LOGO图标 左侧边栏LOGO文字 默认登陆页面LOGO 页面Loading样式修改
hopefullman的博客
05-09 2146
默认loading样式时一个爱的魔力转圈圈，怎么改成你自己的，在哪里改？ src / component/pageLoading.ts 修改这个文件就好了。 默认网站favicon.ico 是一个antd design官方的，怎么改成你自己的，在哪里改？ public / icons/ 这里就可以修改了 网页LOGO图标 左侧边栏LOGO文字 默认登陆页面LOGO，怎么改成你自己的，在哪里改？ 在src /assets 默认有个logo.svg或者png的logo，先把图片替换称自己的，.
react 设置图片加载失败显示的默认图 iconfont图片循环显示
chueluo0880的博客
06-14 1576
import noImg from "../../static/images/others/mrtx.jpg"; <img src="" onError={(e) => {e.target.onerror = null;e.target.src=noImg}}/> ico...
关于antd升级为4.0 不再内置icon组件， 循环渲染动态icon的解决方案
m0_66288747的博客
05-16 490
关于antd升级为4.0 不再内置icon组件， 循环渲染动态icon的解决方案
Axure 实用组件库（包含elementui-antd-antv-echarts-icon.zip
03-18
axure 实用组件库，包含数千种图标，包含elementui组件库（支持1.*、2.*等多个版本版本），包含阿里antd（移动端、web端）组件库，包含antv、echarts图标组件库等
解决antd的Form组件setFieldsValue的警告问题
01-21
解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置...
在react项目中使用antd的form组件,动态设置input框的值
01-18
问题： ... 原因： 点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也... 用于动态更新值，就可以解决了。 if (result.code===0) { if (result.data) { this.
antd icon 官网 内网本地字体图标压缩包
07-22
antd icon 官网 内网本地字体图标压缩包
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
2022升级 React18+TS高仿AntD从零到一打造组件库课程
使用npx create-react-app my-app 报错
weixin_43990297的博客
05-27 2150
在项目搭建初始化对的时候，使用react官网上的命令创建项目的时候，发现报如下错误 经过噼里啪啦一顿度娘，找到一个有效的方法 解决方案： “更换node cache 路径” 在项目目录下面运行： #npm config set cache “C:\Users\登录windows的用户名\AppData\Roaming\npm-cache”–global 切记目录和“–global”之间没有空格。 原文链接：https://blog.csdn.net/wszxg8866/article/details/835
Ant 表格组件 dataSource不带key 引发的报错
weixin_43990297的博客
03-19 1073
按照 React 的规范，所有的数组组件必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。 如果 dataSource[i].key 没有提供，使用 rowKey 来指定 dataSource 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。 // 比如你的数据主键是 uid return <Table rowKey="u.
react项目开发中遇到的一些报错，（less-loader安装报错，图片路径显示异常等）
weixin_43990297的博客
03-17 644
在此对项目开发中遇到的一些报错处理放在这里记录一下 安装 less-loader 遇到的报错 在进行 react 项目开发的时候，出现了这个错误，TypeError: this.getOptions is not a function 这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理 问题的解决：通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过
react项目配置（less配置，别名配置，antd配置，跨域代理，压缩资源配置等）
weixin_43990297的博客
03-17 634
在react脚手架中修改配置有两种方式 使用npm eject 命令 将配置弹出来（不推荐，不优雅） 使用customize-cra 来新增一个config-overrides.js文件 来进行项目配置 接下来，主要使用第二种方式把一些项目开发中常见配置给记录一下 首先 先安装 必要的两个依赖 yarn add custom-cra react-app-rewired -dev 然后，修改package.json的配置 "scripts": { "start": "react-app-r
react（关于装饰器的配置）
weixin_43990297的博客
03-17 308
在react中，大家有的使用装饰器，比如路由，或者mobx等，但是会发现默认脚手架不支持，接下来就说一下怎么配置，网上大部分都是使用npm eject来弹出脚手架的默认配置，但这样并不优雅，社区提供了其他方案来解决修改配置的方式 首先安装，以下几个依赖 customize-cra react-app-rewired @babel/plugin-proposal-decorators yarn add customize-cra react-app-rewired @babel/plugin-p
React 修改默认端口号
weixin_43990297的博客
08-05 173
修改默认端口号 找到package.json文件中修改 "scripts": { "start": "set PORT=9000 && react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 中的"start"配置信息为 "start":"set PORT=9000 &..
vue antd 为什么模板字符串里加了icon标签没效果
05-27
在Vue Antd中，如果想要在模板字符串中使用Icon组件，需要先在组件中引入Icon组件，然后使用组件的方式来渲染Icon。 具体操作如下： 1. 在组件中引入Icon组件。 ``` import { Icon } from 'ant-design-vue'; ``` 2. 在模板字符串中使用Icon组件。 ``` <template> <div> <Icon type="user" /> <span>用户名</span> </div> </template> ``` 这样就可以在模板字符串中正确地渲染Icon组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值