前言
在前端开发中，需要引入大量的 SVG 图标资源，而 SVG 的优势在于可以缩放而不失真，适配各种分辨率的屏幕，因此在前端编码中广泛应用。但是，使用 SVG 其实还存在一定的麻烦，尤其是在 React 开发中，对 SVG 的引入和管理需要一些技巧。本文将会介绍一个 Node.js 包 @gutenye/react-svg-loader，可用于帮助我们更方便、更灵活地引入和管理 SVG 图标。读完本文，你将理解如何使用此包，并且能够熟练地在 React 项目中处理和使用 SVG。
安装
在开始使用 @gutenye/react-svg-loader 前，我们需要先安装此包。可以使用 npm 在项目中安装它：
npm install --save @gutenye/react-svg-loader
或者使用 yarn 安装：
yarn add @gutenye/react-svg-loader
使用
加载 SVG 的方式有很多种，但使用 @gutenye/react-svg-loader 可以带来更便捷的管理方式，它可以自动把 SVG 图标打包成可用的组件。
例如，我们有一个文件名为 arrow.svg 的 SVG 图标文件，可以按照如下方式使用 @gutenye/react-svg-loader 来将其转换成 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------------------------
----- --------- - -- -- -
-----
--------- ---------------- --------------- --
------
--
------ ------- ----------所有从 JavaScript 模块外部引入的 SVG 图像都将被移动到输出目录，带有 id 的 SVG 元素将被重命名为所提供的命名空间，而不会影响引用它们的 JavaScript 文件中的任何代码。这意味着你可以轻松地使用多个 SVG 图标文件。
配置
@gutenye/react-svg-loader 提供了许多配置选项，用于更加精细地控制 SVG 的操作。下面列出一些常用的配置项：
svgo- SVG 图像优化选项，默认为开启，可以在 SVGO 的文档 中查看所有选项的详细信息；jsx- 指定生成的 React 组件的类型，默认为React.PureComponent；xmlDeclaration- 指定是否在输出的 SVG 标记中添加 XML 声明，默认为true；classIdPrefix- 为 SVG 元素的类和 ID 属性添加的前缀；removeComment- 指定是否从输出中剥离注释。
可以在 webpack 配置文件中来配置这些选项，比如：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ----------------------------
-------- -
---- ------
----- -
-------- -- -------------- ----- ---
--
--
--
--
--
--
--
--上面的配置将指定 React 组件类型为 React.Component，同时让我们的 SVG 不会被优化。
除了上面提到的选项之外，@gutenye/react-svg-loader 还支持其它许多选项。具体可以参考 官方文档。
示例
下面是一个完整的实例，来演示如何加载并使用 SVG 图标：
src/components/Icon.js
import React from 'react';
import { ReactSVG } from '@gutenye/react-svg-loader';
const Icon = ({ src, ...props }) => (
<ReactSVG src={src} {...props} />
);
export default Icon;src/components/ArrowIcon.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------
----- --------- - -- -- -
-----
----- ---------------- --------------- --
------
--
------ ------- ----------我们通过 Icon 和 ArrowIcon 两个组件来处理 SVG 图标的加载。Icon 是一个包装了 @gutenye/react-svg-loader 组件的简单组件，提供了 src 属性用于指定 SVG 图标。而 ArrowIcon 则是具体的一个 SVG 图标组件，它包含了 Icon 组件，并在其中指定了具体的 SVG 文件。
这里，我们假设项目中有一个名为 "arrow.svg" 的 SVG 图标文件。
最后，在应用程序的某个位置，你可以像这样渲染 ArrowIcon：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------------
----- --- - -- -- -
-----
---------- --
------
--
------ ------- ----结论
@gutenye/react-svg-loader 包提供了一种更加便捷的管理 SVG 图标的方式，可以轻松地将 SVG 文件转换成可用的 React 组件。本文介绍了如何安装、使用和配置 @gutenye/react-svg-loader，同时也提供了一个完整的示例，希望读者们能够掌握此技术，并且能够在实际项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005555881e8991b448d28a8