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']
                    )
            }
        </>
    )
}
相关推荐
用户0333074139512 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey12 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒13 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员13 小时前
iOS冷启动监控Demo
前端
光影少年13 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱14 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO14 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈
维克兜率天14 小时前
趋势过滤:避免被“假突破“反复打脸
前端
8年区块链老兵14 小时前
一篇文章教会你:用区块高度读懂比特币链上的每一笔交易
前端
xixichensh15 小时前
前端转做AI程序员第一步——开发一个AI流式对话Demo
前端