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} /> : ''
  }
*/