SVG 图形成为了前端开发中必不可少的一部分。在实际开发中，我们不仅需要在页面中使用单独的 SVG 图形，很多时候还需要将多个 SVG 图形合并为一个 SVG Sprite 图形以提高网页的加载性能和可维护性。而 @vusion/svg-sprite 就是一款能够帮助我们快速、高效地实现 SVG Sprite 图形的 npm 包。本文将详细介绍 @vusion/svg-sprite 的使用方法，并给出实用的示例代码。
@vusion/svg-sprite 的安装
在使用 @vusion/svg-sprite 之前，我们需要先将其安装到项目中。使用 npm 命令即可完成安装：
npm install @vusion/svg-sprite --save-dev
@vusion/svg-sprite 的使用
概述
@vusion/svg-sprite 的使用方法相对比较简单，主要包含以下几个步骤：
- 创建 SVG Sprite 空模板
- 将需要合并的 SVG 图形插入到空模板中
- 配置插件生成 Sprite 图形
- 在页面中使用 Sprite 图形
下面我们将详细讲解每一步的操作。
创建 SVG Sprite 空模板
我们首先需要创建一个 SVG 空模板，用于存放需要合并的 SVG 图形。这个空模板只需要包含 <symbol> 元素即可。我们可以将其保存为“sprite.svg”文件。
-- -------------------- ---- -------
---- -----------------------------------
------- -------------- ---------- - -- ----
----- ----------------------------------------------------------------------------- -------------------------------------------------------------
----- ----- ----- --------- -------------
----- ----- ----- ---------- ------------
---------
------- --------------- ---------- - -- ----
----- --------------------------------------------------------------------------------- ---------------------------------------------------------
----- ----- ----- ---------- ------------
---------
------其中 <symbol> 元素的 id 属性是必须的，用于后面生成 Sprite 图形时引用这个图形。
将需要合并的 SVG 图形插入到空模板中
我们将需要合并的 SVG 图形插入到空模板中的 <symbol> 元素内，如下：
-- -------------------- ---- -------
---- -----------------------------------
------- -------------- ---------- - -- ----
----- ----------------------------------------------------------------------------- -------------------------------------------------------------
----- ----- ----- --------- -------------
----- ----- ----- ---------- ------------
---------
------- --------------- ---------- - -- ----
----- --------------------------------------------------------------------------------- ---------------------------------------------------------
----- ----- ----- ---------- ------------
---------
---- --------- --- -- ---
------- ---------------- ---------- - -- ----
----- ---------------------------------------------------------------------------------------------------------------------------
--------------- -----------------------------------------------------------------
---------
------配置插件生成 Sprite 图形
在本文中，我们使用 gulp 来配置插件生成 Sprite 图形。在项目中安装 gulp 之后，我们可以创建一个名为 “sprites” 的 gulp 任务以生成 Sprite 图形。其中用到了 gulp-cheerio、gulp-svgmin、gulp-svg-sprite 三个 npm 包。
-- -------------------- ---- -------
--- ---- - ----------------
--- ------- - ------------------------
--- ------ - -----------------------
--- --------- - ---------------------------
-------------------- -------- -- -
------ ------------------------
---------------
---------------
---- -------- --- -
-------------------------------
--
-------------- --------- -----
---
-----------------
----- -
------- -
------- ----------------------
-
-
---
---------------------------------
---代码中的 ['fill'] 是用来删除 SVG 图形中的 fill 属性，因为在生成 Sprite 图形时，我们希望能够自己控制每一个图形的颜色，而不是在本身的 fill 属性中定义。
gulp-svg-sprite 的配置中，我们定义了最终生成的 Sprite 图形放到了“dist/images”目录下，并将其命名为“sprite.svg”。
配置完成后，在命令行中输入 gulp sprites，即可生成需要的 Sprite 图形。
在页面中使用 Sprite 图形
在实际的开发过程中，我们可以通过以下几种方式在页面中使用 Sprite 图形。
方式一：使用 <svg> 元素
我们可以直接在页面中使用 <svg> 元素，并设置 use 属性指向 SVG Sprite 模板文件中的相应 id，如下：
<svg>
<use xlink:href="images/sprite.svg#icon-plus"></use>
</svg>这样就可以在页面中展示这个 SVG 图形了。
方式二：使用 CSS sprite
使用 CSS Sprites 技术也是一种十分流行的展示 Sprite 图形的方式。我们可以通过设置 background-image 和 background-position 的方式展示对应的图形。
<div class="icon icon-plus"></div>
-- -------------------- ---- -------
----- -
------ -----
------- -----
----------------- -----------------------
------------------ ----------
-
---------- -
-------------------- --- ----
-通过这样的方式，我们同样可以将 Sprite 图形展示在页面上。
总结
本文详细介绍了 @vusion/svg-sprite 的使用方法和实现原理，并结合示例代码给出了实际应用的方法及具体操作步骤。希望大家能够在实际工作中灵活运用这些技术，提高网站的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbe16b5cbfe1ea0611b18