1. 什么是 gatsby-plugin-svg-sprite
gatsby-plugin-svg-sprite 是一款可以将 SVG 图标打包成单一的 sprite 图片并自动生成对应的 React 组件的 Gatsby 插件。该插件在优化网站性能、提高开发效率等方面都有很大的帮助。
2. 如何安装和使用 gatsby-plugin-svg-sprite
2.1 安装
使用 npm 安装 gatsby-plugin-svg-sprite：
npm install gatsby-plugin-svg-sprite --save-dev
2.2 配置
在 gatsby-config.js 文件中添加以下内容即可使用该插件：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ---------------------------
-------- -
-- ---
--
--
--
-2.2.1 可选参数
options 参数为可选参数，可以配置一些插件的行为：
symbolId: 符号 ID 的前缀。默认为icon-。stripPath: 去掉 SVG 文件的路径信息。默认为true。createSymbol: 是否生成 SVG 符号。默认为true。strict: 是否严格检查 SVG 文件内容。默认为false。inlineStyles: 是否内联 SVG 样式。默认为false。jsx: 是否生成jsx代码。默认为false。svgProps:svg元素的属性对象。默认为{ style: { display: 'none' } }。
2.2.2 导入 SVG 文件
将需要导入的 SVG 文件放置在 src/icons 文件夹中即可。然后在需要使用该图标的页面或组件中引入该图标的 React 组件即可。
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- -- ---- - ---- -------------------
----- ----------- - -- -- -
------ -
-----
----- --
------
-
-
------ ------- -----------3. 示例代码
3.1 配置文件
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- ---------------------------
-------- -
--------- ------------------
---------- -----
------------- -----
------- ------
------------- ------
---- -----
--------- - ------ - -------- ------ - --
--
--
--
-3.2 SVG 图标
-- -------------------- ---- -------
---- -------------- ---
---- ---------------------------------- ---------- - -- ----
-----
-----------
----- -------------
--
-----
--------- ---------- ------ ---------------- ---- -- --------------
--
------3.3 导入 SVG 图标的 React 组件
-- -------------------- ---- -------
-- -------------------------
------ ----- ---- -------
------ - -------------- -- ---- - ---- -------------------
----- ----------- - -- -- -
------ -
-----
----- --
------
-
-
------ ------- -----------4. 总结
通过使用 gatsby-plugin-svg-sprite 插件，我们可以轻松地将 SVG 图标打包成单一的 sprite 图片并自动生成对应的 React 组件，从而提高网站性能和开发效率。在配置插件时，我们可以自定义一些行为，例如符号 ID 的前缀、去掉 SVG 文件的路径信息等。在导入 SVG 图标时，我们只需将图标放置在 src/icons 文件夹中，然后在需要使用的页面或组件中引入相应的 React 组件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f5c