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

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

在react中插入SVG

首先安装插件vite-plugin-svgr

复制 1# npm
 2npm install --save-dev vite-plugin-svgr
 3
 4# yarn
 5yarn add -D vite-plugin-svgr
 6
 7# pnpm
 8pnpm add -D vite-plugin-svgr

修改 vite.config.ts 配置：

复制 1import svgr from "vite-plugin-svgr";
 2
 3export default {
 4  
 5    plugins: [
 6          
 7        svgr({
 8            svgrOptions: {
 9                icon: true,
10            },
11            include: "**/*.svg?react",
12        }),
13    ],
14};

调用

复制 1import AddressIcon from '@/assets/address.svg?react';
 2import address from '@/assets/address.svg';
 3
 4
 5function Home() {
 6  return (
 7    <>
 8      <img src={address}/>
 9      <AddressIcon className="addressIcon"/>
10    </>
11  );
12}
13export default Home;
14

控制台

接下来你就可以使用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格式，并且面向未来

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

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

支持透明度

允许静止或动态图像