antd design中menu使用antd图标或自定义图片

// antd: 5.1.1
 
复制代码
import React from "react";

// 1、自定义图片
// import Icon from '@ant-design/icons';
// import Logo from '@/assets/Logo.png'
// import './index.scss' // 自定义修改图片css

// const Iconfont = (props: {icon: string}) => {
//   const ele = <img className="logoImg" src={Logo} alt='' />
//   return <Icon component={() => ele}/>
// }

// 2、使用antd
import * as Icons from '@ant-design/icons';

const Iconfont = (props: {icon: string}) => {
  const { icon } = props
  const antIcon: { [key: string]: any } = Icons
  return React.createElement(antIcon[icon])
}

export default Iconfont

/*
  使用:
  return {
    ...item,
    icon: item.icon ? <Iconfont icon={item.icon} /> : ''
  }
*/ 
复制代码

 

 

 

posted @   王希有  阅读(2989)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2020-01-03 vue子组件实时获取父组件传来的值
点击右上角即可分享
微信分享提示