将SVG文件转换为React组件，通过css修改svg图标的颜色，减少项目内的静态资源

在设计稿中我们经常能见到同一种图标不同颜色，如果直接使用IMG标签插入SVG文件的话是没有办法修改颜色的，就要保存多个SVG文件来显示不同颜色。

在react中把SVG文件转换成组件，使用CSS修改SVG颜色。只需加载一个SVG文件，就可以通过CSS展示多种颜色。从而实现减少包体积、减少静态资源请求。

在react中插入SVG

首先安装插件vite-plugin-svgr

# npm
npm install --save-dev vite-plugin-svgr

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr

修改 vite.config.ts 配置：

import svgr from "vite-plugin-svgr";

export default {
  // ...
	plugins: [
          // ...
		svgr({
			svgrOptions: {
				icon: true,
			},
			include: "**/*.svg?react",//'?react'为标识，有效区分svg是否需要转换成组件
		}),
	],
};

调用

import AddressIcon from '@/assets/address.svg?react';
import address from '@/assets/address.svg';
//我在vite的配置文件中加了'?react'作为转换标识
//当你的组件中需要使用img标签来展示svg图标不加后缀即可
function Home() {
  return (
    <>
      <img src={address}/>
      <AddressIcon className="addressIcon"/>
    </>
  );
}
export default Home;

控制台

接下来你就可以使用CSS来处理你的svg文件了

在调用过程中如果遇到这个报错：

Failed to execute 'createElement' on 'Document': The tag name provided ('/src/assets/svg/xxx.svg') is not a valid name.

应该就是你遗漏了?react后缀

为什么使用SVG

在为网站和其他数字媒体创建图像时，哪种文件格式会给你带来最佳效果？ 你需要考虑速度与图像质量和规模。让我们深入了解每种图像格式的优缺点。

SVG是可缩放矢量图形。它非常实用，适用于除照片之外的任何类型的图像。这就是设计师更频繁地使用它的原因。

SVG是一种无损格式。这意味着它在压缩时不会丢失任何数据，呈现不同的颜色。最常用于网络上的图形和LOGO以及将在视网膜或其他高分辨率屏幕上查看的项目。

SVG的优点

矢量格式可呈现任何大小而不降低其质量

能够在代码或文本编辑器中创建简单的SVG渲染

从Adobe Illustrator或Sketch设计可导出复杂图形或者是草图

可以访问SVG文本

SVG很容易设计风格和脚本

现代浏览器支持SVG格式，并且面向未来

格式具有高度可压缩性和轻量级

由于基于文本的格式，因此适合搜索

支持透明度

允许静止或动态图像

稀土掘金搜索 ZHYCH 即可找到我学习更多前端小技巧，未经作者允许请勿转载