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']
                    )
            }
        </>
    )
}
相关推荐
葡萄城技术团队13 小时前
一键触发工作表中所有异步函数:用依赖单元格刷新 SpreadJS 公式
前端
Bigger13 小时前
谁动了我的 URL?——记一次微前端"灵异 Bug"的排查实录
前端·ai编程·vue-router
JavaGuide13 小时前
轻量开源版 IDEA 来了!
前端·后端
张洪权13 小时前
nest.js websocket 群聊----私聊功能
前端·nestjs
流光D13 小时前
AI Era: Building Web Sites and Configuring Nginx Reverse Proxy Process
前端·人工智能·nginx
sakidd13 小时前
VS Code 的 AI Chat 现在已经这么能干了?
前端
计算机魔术师13 小时前
英伟达砸130亿美元买下一个平台,黄仁勋到底在怕什么?
前端
leoZ23114 小时前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
coderCN14 小时前
Nodejs path OS process child_process FS crypto zlib ffmpeg Markdown 转 html
前端
梨想橙汁14 小时前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript