npm 包 create-svg-sprite 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用 SVG 图标。使用单独的 SVG 文件虽然简单，但当图标数量较多时，维护起来就很费劲。这时候，SVG 雪碧图就能派上用场了。

create-svg-sprite 是一个 npm 包，可以帮助我们将多个 SVG 文件合并成一张 SVG 雪碧图，方便管理和使用。本文将介绍如何使用该 npm 包。

安装

使用 npm 安装 create-svg-sprite：

npm install create-svg-sprite --save-dev

或者使用 yarn 安装：

yarn add create-svg-sprite --dev

使用

create-svg-sprite 提供了一个非常方便的命令行工具。在项目根目录下，创建一个名为 sprites 的文件夹，并在该文件夹下保存要合并的 SVG 文件。例如，我们有以下两个 SVG 文件：

sprites/icon1.svg
sprites/icon2.svg

则可以使用以下命令将它们合并成一个名为 sprite.svg 的雪碧图：

npx svg-sprite sprites/*.svg -o public/img/sprite.svg

其中，sprites/*.svg 指定要合并的 SVG 文件路径，public/img/sprite.svg 指定生成的雪碧图路径。

命令执行成功后，生成的雪碧图文件会被保存在 public/img/sprite.svg 中。

配置

create-svg-sprite 还提供了非常丰富的配置选项，可以满足各种场景的需求。下面是一些常用的配置选项：

命名空间

设置命名空间，避免不同雪碧图的 class 名称冲突：

npx svg-sprite sprites/*.svg -o public/img/sprite.svg --namespace sprite

雪碧图大小

设置雪碧图的宽度和高度：

npx svg-sprite sprites/*.svg -o public/img/sprite.svg --width 100 --height 100

样式模板

使用自定义的样式模板，定制雪碧图的样式：

npx svg-sprite sprites/*.svg -o public/img/sprite.svg --template style.scss

嵌入 sprite

将雪碧图嵌入到 HTML 中，避免多个 HTTP 请求：

npx svg-sprite sprites/*.svg -o public/img/sprite.svg --inline

示例代码

以下是一个示例代码，将多个 SVG 图标合并成一张 SVG 雪碧图，并在 HTML 页面中使用：

HTML

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ---------- ------ ------------
    -------
      ----- -
        -------- -------------
        ------ -----
        ------- -----
        ----------- --------------------- ----------
      -
      ------ -
        -------------------- - --
      -
      ------ -
        -------------------- - ------
      -
    --------
  -------
  ------
    ------- ------ ---------
    ---- ----------- -------------
    ---- ----------- -------------
    ------- ------------------------
  -------
-------

JavaScript

-- -------------------- ---- -------
------ ---------------
------ ----- ---- ----------------------
------ ----- ---- ----------------------

-- -- --- ---
----- --------- - ------------------------------
------------------- - -
  ---- ---------------------------------- ----------------------
    ------- ----------------------------
    ------- ----------------------------
  ------
--
-------------------------------------

总结

通过本文的学习，我们了解了如何使用 create-svg-sprite 这个 npm 包将多个 SVG 文件合并成一张 SVG 雪碧图。使用 SVG 雪碧图可以方便地管理和使用多个 SVG 图标，减少 HTTP 请求，优化页面性能。同时，create-svg-sprite 还提供了丰富的配置选项，可以满足各种场景的需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b80