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']
                    )
            }
        </>
    )
}
相关推荐
saber_andlibert5 小时前
TCMalloc底层实现
java·前端·网络
逍遥德5 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~5 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions5 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子5 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘6 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录6 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
梦帮科技6 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
VT.馒头7 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多7 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js