React 动态显示icon

通过@ant-design/icons引入Icon大对象,通过Icon['icon名']获取对应的对象,在需要添加icon的地方调用React.createElement就可以显示icon。

javascript 复制代码
import { Button  } from "antd"
import React from 'react'
import  * as Icon from '@ant-design/icons';

function MyButton(props:{
    icon: string,
    text: string,
}){
    return (
        <>
            <Button
                icon={
                    React.createElement(
                        Icon[props.icon]
                    )
                }>
                    {props.text}
            </Button>
        </>
    )
}

export default function(){
    return (
        <>
            <MyButton icon='PlusOutlined' text='Add' />
            
            <br/>

            {
                React.createElement(
                        Icon['PlusOutlined']
                    )
            }
        </>
    )
}
相关推荐
anOnion14 分钟前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er17 分钟前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart1 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星2 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code
sunny_2 小时前
⚡️ vite-plugin-oxc:从 Babel 到 Oxc,我为 Vite 写了一个高性能编译插件
前端·webpack·架构
GIS之路2 小时前
ArcPy 开发环境搭建
前端
林小帅4 小时前
【笔记】OpenClaw 架构浅析
前端·agent
林小帅4 小时前
【笔记】OpenClaw 生态系统的多语言实现对比分析
前端·agent
程序猿的程4 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
不爱说话郭德纲5 小时前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app