react批量引入svg图标

PS:也不只在react中用,其他框架也可,生态圈不一样配置会不同,但是能提供整体的思路,可以参考。
在批量引入之前,我们需要安装一个包并配置到typescript.json文件中。

1. 安装:yarn add -D @type/webpack-env
2. 配置typescript.json"compilerOptions": {"types": ["@types/webpack-env"]}

批量引入处理并导出封装组件
在src文件下新建一个icon文件,然后新建一个.tsx文件
注:这块代码可直接copy走

import Icon from '@ant-design/icons';// 批量引入
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {const requireAll = requireContext.keys().map(key => {const name = key.replace(/\.\/(.*)\.\w+$/, '$1');console.log(name, requireContext(key))return { name, value: requireContext(key) };})return requireAll
}let routeList: {name: string, value: string}[] = []
try {routeList = importAll(require.context('../assets/icons', true, /\.svg$/))
} catch (error) {console.log(error);routeList = []
}
/*** * 导出图标* */
const IconFont = (props: {name: string, width?: string | number, className?: string}) => {const ListItem = routeList.find(item => item.name === props.name)return (<Iconcomponent={() => (<imgsrc={ListItem?.value}alt=""width={props.width || 16}/>)}{...props}/>);
};export {IconFont
}

使用方式:

// 引入图标
import { IconFont } from '@/icons/sider_left_icon'
<IconFontname='library'width="23"className={styles.library_button_icon}/>

注:我之所以能直接使用@去默认引入src下的所有文件,是因为我在typescript中配置path

"compilerOptions": {"paths": {"@/*": ["./src/*"]},"types": ["@types/webpack-env"]},

详细了解@types/webpack-env,可点击链接查看

PS:这样的好处:就是我们不需要一遍遍的引入和导出,手动一遍遍编写不同图标多组件,只需要引入一次icon 组件然后给不同的name就可以显示不通的图标,可维护性强。随着项目迭代过多,大量的需要图标时,不用再在需要引入图标的组件中占用较多的位置,也不用再后期图标更改时,全局搜索图标组件进行更改。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/747118.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

私域流量转化干货,揭秘四大关键因素!

在这个得私域者得天下的互联网时代&#xff0c;如何有效地实现私域流量的转化成为了很多企业或是个人的必修课。 接下来&#xff0c;就给大家分享私域转化的四大关键因素&#xff0c;帮助大家更好地实现私域流量的转化。 1、兴趣了解 在私域流量转化的过程中&#xff0c;我们…

js中的原型(原型对象,对象原型,原型继承,原型链)

js中的原型 一.原型二.constructor 属性三.对象原型四.原型继承五.原型链 一.原型 构造函数通过原型分配的函数是所有实例化对象所共享的。 JavaScript 规定&#xff0c;每一个构造函数都有一个 prototype 属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象 …

C#中求余算法的用法及区别:Math.DivRem()方法 vs 运算符%

目录 1.Math.DivRem() 2.运算符% 3.区别 Math.DivRem()和运算符%都是用于求余运算&#xff0c;但它们在使用和功能上有一些区别&#xff1a; 1.Math.DivRem() Math.DivRem()是.NET框架中的一个静态方法&#xff0c;它将除法和求余运算的结果同时返回。它有两个版本&#xf…

Linux编译器gcc/g++的功能与使用

一、程序的生成 首先&#xff0c;我们知道程序的编译分为四步&#xff1a; 1、预处理 2、编译 3、汇编 4、链接 1.1预处理 预处理功能主要包括头文件展开、宏定义、文件包含、条件编译、去注释等。 所谓的头文件展开就是在预处理时候&#xff0c;将头文件内容拷贝至源文…

Android平台架构和Android Framework的区别

Android平台架构是指Android操作系统的整体架构&#xff0c;主要由四个层级组成&#xff1a;应用层、应用框架层、系统运行库层和Linux内核层。 应用层&#xff1a;包括用户界面、应用程序和系统应用等。用户界面层负责呈现图形化界面&#xff0c;应用程序层包括各种应用程序&a…

C语言从入门到熟悉------第四阶段

指针 地址和指针的概念 要明白什么是指针&#xff0c;必须先要弄清楚数据在内存中是如何存储的&#xff0c;又是如何被读取的。如果在程序中定义了一个变量&#xff0c;在对程序进行编译时&#xff0c;系统就会为这个变量分配内存单元。编译系统根据程序中定义的变量类型分配…

Linux中防火墙相关操作

一、查看防火墙状态 可通过两种方式查看防火墙状态&#xff0c;一种通过systemctl命令&#xff0c;另一种是通过firewall-cmd命令。 1、systemctl status firewalld 2、firewall-cmd --state 二、关闭防火墙 1、暂时关闭&#xff1a;设置暂时关闭防火墙将会在下次重启系统后失…

[LVGL]:MACOS下使用LVGL模拟器

如何在MACOS下使用lvgl模拟器 1.安装必要环境 brew install sdl2查看sdl2安装位置&#xff1a; (base) ➜ ~ brew list sdl2 /opt/homebrew/Cellar/sdl2/2.30.1/bin/sdl2-config /opt/homebrew/Cellar/sdl2/2.30.1/include/SDL2/ (78 files) /opt/homebrew/Cellar/sdl2/2.3…

低代码大屏设计器使用入门级图文教程

文章目录 前言一、什么是低代码大屏二、技术选型三、使用过程1.准备环境2. 下载源码3. 启动配置后端初始化数据库修改配置信息启动后端服务4. 前端启动配置问题总结项目初始化失败node|npm版本自由切换python版本自由切换初始化命令启动查看打包

BMP280学习

1.Forced mode模式&#xff0c;单次采集后进入休眠&#xff0c;适用于低采样率。 2.normal mode模式&#xff0c;持续采集&#xff0c;我们使用这种 采集事件基本都是ms级&#xff0c;所以我们1s更新一次。 温度和压力的计算 #include <SPI.h> //定义数据类型 #define s3…

27.函数指针数组

函数指针数组 概念 函数指针的数组本质是一个数组&#xff0c;它允许你存储多个函数指针&#xff0c;并且可以通过索引来调用这些函数。 定义 int (*pfunc[3])(int,int){getMax,getMin,getAdd};应用 #include <stdio.h>int getMax(int a,int b) {return a>b?a:b…

vs2022安装番茄助手后无法使用

1.安装番茄助手 兼容性-win7-管理员启动 2.破解 下载附件“VA_X64.dll”、“PiaoYun64.dll”破解文件&#xff0c;使用Everything找到C盘对应的“VA_X64.dll”路径&#xff0c;将两个破解文件拷贝到此路径。 3.命令行键入类似命令&#xff1a;D:\OfficeSoftware\VisualStudi…

计算机视觉+人工智能碰撞出新的火花

计算机视觉&#xff08;CV&#xff09;技术的优势是其能够处理大量的图像和视频数据&#xff0c;并快速准确地提取出有用的信息。 1. 自动化&#xff1a;CV技术可以自动化地执行各种图像处理任务&#xff0c;例如目标检测、图像分类和图像分割。这样可以提高工作效率并降低人工…

SfM——八点法计算F矩阵(基础矩阵)与三角测量

1 八点法计算F矩阵&#xff08;基础矩阵&#xff09; 基础矩阵用于描述两个视图之间的几何关系 基础矩阵&#xff1a;基础矩阵 F F F 是描述两个视图之间相机投影关系的矩阵。对于两个对应的图像坐标点 ( x , y , 1 ) (x, y, 1) (x,y,1) 和 ( u , v , 1 ) (u, v, 1) (u,v,1…

前端:设置覆盖图片的层叠顺序

html <div class"image-container"><img src"image1.jpg" class"image1" alt"Image 1"><img src"image2.jpg" class"image2" alt"Image 2"> </div> css代码 .image-contai…

Elasticsearch(8) random_score的使用

elasticsearch version&#xff1a; 7.10.1 random_score的使用 在Elasticsearch中&#xff0c;random_score查询可以用来随机排序搜索结果&#xff0c;这对于实现诸如轮播、随机推荐等功能非常有用。 random_score的语法 GET /<索引名>/_search {"query":…

Upload-labs靶场

文件漏洞上传进行复现 环境搭建--->搭建好环境如下&#xff1a; 打开第一关&#xff0c;尝试文件上传漏洞 根据界面提示&#xff0c;选择一个文件&#xff08;.php文件&#xff09;进行上传&#xff0c;发现无法上传 根据提示是指使用js对不合法文件进行了检查&#xff0c;…

Modbus -tcp协议使用第二版

1.1 协议描述 1.1.1 总体通信结构 MODBUS TCP/IP 的通信系统可以包括不同类型的设备&#xff1a; &#xff08;1&#xff09;连接至 TCP/IP 网络的 MODBUS TCP/IP 客户机和服务器设备&#xff1b; &#xff08;2&#xff09;互连设备&#xff0c;例如&#xff1a;在 TCP/IP…

Linux——GlusterFS分布式文件系统群集

一、GlusterFS简介 GlusterFS是一个开源的分布式文件系统&#xff0c;同时也是Scale-Out存储解决方案Gluster的核心&#xff0c;在存储数据方面具有强大的横向扩展能力&#xff0c;通过开展不同的节点可以支持数PB级别的存储容量。 GlusterFS的特点 扩展性和高性能、…

重学SpringBoot3-Problemdetails

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-Problemdetails Problem Details的概念ProblemDetails配置类在Spring Boot 3中使用Problem Details未配置Problem Details配置Problem Details自定义异常…