首页 > 其他分享 >antd design中menu使用antd图标或自定义图片

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

时间:2023-01-03 10:55:55浏览次数:39  
标签:const 自定义 menu design import antd icon

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

 

 

 

标签:const,自定义,menu,design,import,antd,icon
From: https://www.cnblogs.com/-roc/p/17021436.html

相关文章

  • antd vue3 图片 手动上传
    <template><a-uploadv-model:file-list="fileList"name="avatar"list-type="picture-card"class="avatar-uploader":show-upload-list="false......
  • 玩转dnmp之自定义PHP容器
    文章简介在前面几篇文章中,我们使用dnmp搭建了一个完整的docker开发环境。这篇文章接着分享如何在dnmp的基础上搭建一个自定义的PHP容器,实现多版本的PHP容器。前期准备首先我......
  • vue-slot及自定义分发
    Vue-slot插槽应用在组合组件的场景中<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app">......
  • 使用lambda表达式实现sort的自定义排序
    使用lambda表达式实现sort的自定义排序(C++andJava)首先大致讲一下什么是lambda表达式你也可以将它就当做是匿名函数,lambda表达式其实就是匿名函数演化出的一种语法系统......
  • Antd(Ant Design)使用时遇到的问题记录
    antd的Table组件实现自定义分页数据条数在Table组件上的pagination属性上可以实现自定义分页数据条数<TabledataSource={dataSource}columns={columns}pagina......
  • Excel 自定义格式
    Excel自定义格式代码的结构,常规情况下分为四部分,中间用英文的分号;分隔,每一段的意思是:正数格式;负数格式;零格式;文本格式如果使用条件判断,每一段的意思是:[条件1]指定......
  • 一步一步自定义SpringMVC参数解析器
    ​​​​随心所欲,自定义参数解析器绑定数据。题图:fromZoommy干货SpringMVC解析器用于解析request请求参数并绑定数据到Controller的入参上。自定义一个参数解析器需要实现......
  • odoo10如何自定义自动生成单据编号
    1.在已有的model中穿件一个字段nameclassqingjiadan(models.Model):_name='qingjia.qingjiadan'name=fields.Char(string='编号',readonly=True)2.创建qingjia_app......
  • jsp自定义标签
    jsp自定义标签   需求:向浏览器输出当前客户的IP地址(只能使用jsp标签)1.自定义标签开发步骤    1. 编写一个普通的java类,继承SimpleTagSupport......
  • Django自定义分页器
    目录Django自定义分页器一、分页器思路二、自定义分页器的使用Django自定义分页器一、分页器思路分页器主要听处理逻辑代码最后很简单推导流程 1.queryset支持切片......