React中优雅的插入SVG图标，将SVG文件转换为React组件

在设计稿中我们经常能见到同一种图标不同颜色，如果直接使用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",
        }),
    ],
};

#调用

复制import AddressIcon from '@/assets/address.svg?react';
import address from '@/assets/address.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格式，并且面向未来

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

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

支持透明度

允许静止或动态图像