介绍
SVG 是一种可缩放矢量图形，使用它可以创建独特的图标和效果。在 Web 开发中，SVG 图标的重要性日益增加。而 @sleewoo/svg-sprite-loader 是一个非常好用的 npm 包，可以将多个 SVG 文件合并成一个 SVG sprite，然后就可以在页面中轻松使用这些图标，而不需要每次加载单独的 SVG 文件。
本文将介绍如何使用 @sleewoo/svg-sprite-loader 创建 SVG sprite，并将其导入到您的项目中。
安装
您需要在项目中安装 @sleewoo/svg-sprite-loader 和一些其他的依赖项，以便使用此包。您可以使用 npm，在终端中输入以下命令：
npm install @sleewoo/svg-sprite-loader svgo svg4everybody --save-dev
@sleewoo/svg-sprite-loader是本文介绍的 svg-sprite-loader。svgo是一种用于处理 SVG 文件的软件，可以将 SVG 文件压缩并清理其中的冗余信息。svg4everybody是一个 polyfill，可以解决在某些浏览器中，SVG sprite 的use元素不能正常显示的问题。
使用
在项目中使用 @sleewoo/svg-sprite-loader 创建 SVG sprite 的过程分为四个步骤。
1.创建 SVG 文件
首先，我们需要创建一些 SVG 文件，这些文件将被合并成一个 SVG sprite。您可以使用任何绘图工具创建这些文件，当然，您也可以从互联网上下载现成的图标。
下面是一个示例 SVG 文件，命名为 icon.svg：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M19 12v-2h-3V7a5 5 0 1 0-2 0v3H5v2h9v3l4-3z"></path> </svg>
2.配置 webpack
接下来，我们需要在 webpack 配置文件中添加 @sleewoo/svg-sprite-loader 的配置。这是一个示例的 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------- - --------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- -
- ------- ------------------- --
- ------- ------------- -
-
-
-
--
-------- -
--- ------------------------
-
--在上面的配置中，我们为所有 .svg 文件启用了两个 loader：svg-sprite-loader 和 svgo-loader。前者将 SVG 文件合并成一个 SVG sprite，后者清理其中的冗余信息。
如果您需要在 SVG 文件中添加 class 或 id 属性，可以使用 svg4everybody。您只需要将以下代码添加到您的 JavaScript 文件中即可：
import svg4everybody from 'svg4everybody'; svg4everybody();
3.使用导入的 SVG sprite
现在，您已经创建了一个 SVG sprite，您需要在页面中使用它。根据需要，您可以使用 <svg> 或 <symbol> 元素，代码示例如下：
-- -------------------- ---- -------
---- ---- ----- -- ---
-----
---- -------------------------------------
------
---- -- -------- -- ---
-----
------- --------- ---------- - -- ----
----- ----------- ----- -------------------
----- ------ ------------ - - - --- -------------------------
---------
---- -------------------------
------4.自定义
最后，您可以根据需要自定义 SVG sprite。您可以在 webpack 配置文件中为 @sleewoo/svg-sprite-loader 添加一些选项，或在其它地方使用 Sprite 类进行配置。
以下是一个示例：
-- -------------------- ---- -------
----- --------------- - --------------------------------------
--------------------------
-
-- -- --
--
-
-- ------------ --
--------------- -----------------------
-
--spritesFilename 选项指定了导出的 SVG sprite 的路径和文件名。
总结
在本文中，我们介绍了如何使用 @sleewoo/svg-sprite-loader 创建 SVG sprite。您需要创建一些 SVG 文件，然后使用 webpack 和 @sleewoo/svg-sprite-loader 将这些文件合并成一个 SVG sprite。
使用 SVG sprite 可以提高页面加载速度，同时也可以方便地管理 SVG 图标。
相关代码示例可在 GitHub 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ebd81e8991b448dc75c