react: 动态设置ant-design/icons图标

antd 版本：V4

@ant-design/icons 版本： V4

在此版本中，icon的图标模式为标签形式，不像element那样可以通过改变class而改变icon的图标样式。

在我使用umijs开发后端管理系统时候，需要用到动态的icon图标，系统配置的时候只会传递icon的标签名称，比如正常的图标标签为：<PlusCircleFilled />，系统存的是PlusCircleFilled string类型，我需要在页面上显示对应的图标。

1.创建一个icon.ts文件，内容如下：

import React from 'react'
import * as icons from '@ant-design/icons'const Icon = (props: { icon: string }) => {const { icon } = props;const antIcon: { [key: string]: any } = icons;return React.createElement(antIcon[icon]);
};export default Icon

2.使用

import Icon from './icon'

<Icon icon={item.icon}/> // item.icon为动态传入的标签名称

react: 动态设置ant-design/icons图标相关推荐

2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
React如何使用 Ant Design(简单使用)
在这里介绍一下,这个Ant Design组件库是与我们的 element 组件是一样的,使用方法大致相似. antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发 ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
【React】【Ant Design】引入阿里矢量图
一.将选好的图标加入购物车二.点击购物车三.添加至项目四.添加至选择的项目五.找到"我的项目"下的symbol 可以看到这里有你刚刚添加的图标六.点击"复制代码 ...
React开发（259）:react项目理解 ant design debug
react dva中利用select方法取出state中的数据 yield select(state=> state.xxx)
react学习(60)--ant design中getFieldDecorator
<From><FormItem>//JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 {getFieldDecorator('userName',{initialV ...
安装和使用Ant Design Vue 图标库
# 进入到web项目根目录cd web#在cmd命令窗口执行npm install @ant-design/icons-vue --save# 在main.ts引入 import {createApp ...
Ant Design Icon图标使用
1.安装 @ant-design/icons 图标组件包 npm install --save @ant-design/icons 2.按需引入要使用的图标 import { PhoneOutline ...
React工作60:ant design中getFieldDecorator
<From> <FormItem> //JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 { getFieldD ...

react: 动态设置ant-design/icons图标

react: 动态设置ant-design/icons图标相关推荐

最新文章

热门文章