在前端开发过程中，常常需要使用 SVG 图片进行页面布局和设计。而 svg-react-loader2 是一款 npm 包，可以帮助将 SVG 图片转化为 React 组件，从而更加方便地在项目中使用。
安装
首先需要在项目中安装 svg-react-loader2，可以使用 npm 命令进行安装：
--- ------- ----------------- ----------
配置
安装完毕后，需要在 webpack 配置文件中进行相应的配置。首先，在 module.rules 中添加一个规则，将 SVG 文件通过 svg-react-loader2 转换为 React 组件：
-
----- ---------
---- -
-
------- --------------------
-------- -
---- -----
----- -
-------- -
- -------------- ----- -
-
-
-
-
-
-其中，通过 options 可以设置 jsx 和 svgo，分别对应 JSX 语法和 SVG 的优化。在 svgo.plugins 中可以配置 svgo 的插件，例如上述示例中配置了移除 viewBox 属性的插件。
另外，在 plugins 中添加 svgo 插件，以便在压缩 SVG 文件时自动使用 svgo 进行优化：
----- ---- - ----------------
-------- -
--- ------
-------- -
-
-------------- -----
-
-
--
-使用
在完成配置后，就可以在项目中使用 SVG 图片了。例如，可以在 src/assets 目录下存放 logo.svg 文件，并在组件中进行使用：
------ ----- ---- --------
------ ---- ---- ---------------------
----- --- - -- -- -
------ -
-----
----- --
--------- -----------
------
--
--
------ ------- ----此时，Logo 就是一个 React 组件，可以在页面中直接使用。另外，在 Logo 组件的属性中可以传入其他的 SVG 属性，例如 className 或 style 等。
总结
通过使用 svg-react-loader2，可以将 SVG 图片快速转换为 React 组件，从而方便地在项目中进行使用。在配置中，可以通过设置 options 和 plugins 来优化 SVG 图片的加载和压缩，从而提升项目性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005664381e8991b448e253d