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']
                    )
            }
        </>
    )
}
相关推荐
颖火虫盟主1 天前
Hello World MCP Server 实现总结
java·前端·python
Martin -Tang1 天前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
Full Stack Developme1 天前
Spring-web 解析
java·前端·spring
humcomm1 天前
AI编程对前端架构师技能的具体要求有哪些变化
前端·系统架构·ai编程
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_58:(构建行星数据表——HTML表格高级实战指南)
前端·javascript·ui·html·音视频
kyriewen1 天前
用户打开飞行模式都能打开你的网站?Service Worker 做离线缓存,PWA 实战
前端·javascript·面试
我是汪先生1 天前
学习 day8 memory
前端
栉甜1 天前
APIs学习
前端·javascript·css·学习·html
运营小白1 天前
2026 年 Shopify 关键词映射指南:从混乱到有序的实战经验
前端·一人公司·seonib·自动化内容·搜索流量
Dxy12393102161 天前
HTML的Iframe详解
前端·html