npm 包 svg-sprite-plugin-fork 使用教程

简介

svg-sprite-plugin-fork 是一个 npm 包，它可以将多个 SVG 图标合并成一个雪碧图，并自动生成对应的 CSS 样式。它可以优化网页的加载速度，减少 HTTP 请求次数，帮助网站更快的加载，提高用户体验。

安装

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

使用方法

在配置文件中，使用 svg-sprite-plugin-fork 生成雪碧图。

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

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

在 HTML 中引用

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

配置选项

sprite （必填）

此选项确定了生成的雪碧图的属性，包括名称，路径，大小等等。

  • prefix: string

    • 可选，String，图标的前缀，用于避免文件名相同的冲突。默认值是 icon-。

  • filename: string

    • 可选，String，定义您要生成的雪碧图的路径和名称。支持绝对路径和相对路径。默认值是 img/sprite.svg。

  • dimensions: string[]

    • 可选，String[]，size 可选属性的数组，将在每个符号元素中创建一个宽度和高度属性。默认值是 []，表示不包括 size 属性。

  • bust: boolean

    • 可选，Boolean，bust cache 是否开启。默认值为 false。

  • generate: {}

    • 可选，Object，生成雪碧图的选项。

      • svg: {}

        • 可选，Object，SVG 压缩选项。

          • xmlDeclaration: boolean

            • 可选，Boolean，是否在生成的 SVG 文件中包含 XML 声明。默认值为 false，表示不包含 XML 声明。

          • doctypeDeclaration: boolean

            • 可选，Boolean，是否在生成的 SVG 文件中包含 doctype 声明。默认值为 false，表示不包含 doctype 声明。

      • symbol: boolean

        • 可选，Boolean，是否要为背景定位的图标生成一个程序化的 SVG。默认值为 false，表示不生成 Basic symbols。

      • use: boolean

        • 可选，Boolean，是否在样式和元素清单中包含链接, 这只有当使用 <symbol> 元素作为 SVG 标志的容器时才有意义。默认值为 false。

input

可选的。可以是字符串或对象的数组，指定输入文件的路径。文件将被解析为 SVG，并将它们包含在符号定义中以生成雪碧图。

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

您也可以使用 glob 模式指定多个文件。例如，要从 assets 目录中加载所有 SVG 文件，请使用以下代码：

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

output

可选的。指定每个文件的输出选项。

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

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

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

styles

可选的。指定要生成的样式类型和其他选项。

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

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

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

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

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

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

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

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

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

spriteAttrs

可选的。在生成的雪碧图上设置指定的属性。

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

symbolAttrs

可选的。在生成的每个符号元素上设置指定的属性。

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

svgoConfig

可选的。SVGO（SVG 优化器）配置选项。

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

chunk

可选的。指定要在哪个 chunk 中链接生成的 JavaScript。

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

watch

可选的。如果设置为 true，则监视输入文件的变化并重新生成 sprite。

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

emitSymbols

可选的，默认值为 true。此选项确定是否在 build 输出目录中存储符号定义。如果状态为 false，该文件将设置为 webpack 信息中的公共资源。

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

outputPath

可选的。可以是字符串或函数，指定生成的 SVG 输出的路径。

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

transformData

可选的。指定在生成的雪碧图中使用统一数据。

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

customTemplates

可选的。自定义模板配置。

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

示例代码

下面是一个完整的 webpack 配置文件示例：

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

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

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

其它相关 npm 包依赖

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

总结

svg-sprite-plugin-fork 是一个非常实用的 npm 包，它可以在不降低网站性能的情况下，提高用户体验。我们可以将多个 SVG 图标合并成一个雪碧图，并自动生成对应的 CSS 样式。本文介绍了配置选项、安装、使用方法等详细教程，并附有示例代码。希望本文可以帮助读者使用这个强大的工具。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005697481e8991b448e4d6e

阅读全文

猜你喜欢

  • npm 包 find-anagrams 使用教程

    在开发前端程序时，我们通常会遇到需要对输入的单词进行排序或者查找相关单词的需求。这时候，一个有用的工具就是 npm 包 find-anagrams，它可以帮助我们找到一组单词中所有的字谜词。

    3 年前
  • npm 包 homebridge-raspi-bft-gate 使用教程

    在智能家居时代，许多家庭将家庭智能化变得更容易和便利。其中，homebridge 是一个非常好的开源平台，它可以将硬件设备接入 Apple HomeKit，使用户能够通过 Siri 语音控制家庭设备。

    3 年前
  • npm 包 fuzzy_time 使用教程

    在前端开发中，时间处理经常是必要的，尤其是在需要展示时间的场景下。而对于时间的展示，我们可对时间字符串进行格式化处理。但对于时间字符串的格式化处理，我们需要考虑到用户对时间的认知和习惯。

    3 年前
  • npm 包 webpack-localcache-plugin 使用教程

    前言：在前端开发中，我们的项目依赖一大堆的 npm 包，这些 npm 包的下载和更新可能需要一定时间，加重了我们的开发负担。而 webpack 是一款比较流行的打包工具，可以把各种静态代码（包括 np...

    3 年前
  • npm 包 @belym.a.2105/testcafe 使用教程

    前言 在前端开发中，测试是非常重要的一环。为了方便进行 Web 自动化测试，我们可以使用 TestCafe 工具。而 @belym.a.2105/testcafe 这个 npm 包可以帮助我们更方便地...

    3 年前
  • npm 包 brn 使用教程

    在前端开发中，我们经常需要使用一些工具来快速构建页面组件，例如弹窗、表单、菜单等常用的 UI 组件。这些组件可以在 npm 上找到相关的包，其中 brn 是一个非常优秀的 UI 组件库。

    3 年前
  • NPM包ngx-str-pipe使用教程

    Ngx-str-pipe是一个基于Angular的字符串管道，可用于进行格式化和操作字符串。它是基于RxJS实现，提供多种字符串操作和格式化方法。本篇文章将介绍ngx-str-pipe的基本使用方法和...

    3 年前
  • npm 包 strudel-mobx 使用教程

    什么是 strudel-mobx strudel-mobx 是一个基于 Strudel 框架和 MobX 库的前端工具，用于简化 Web 应用程序的状态管理。它使用 MobX 的响应式机制来提供一种声...

    3 年前
  • npm 包 oidc-provider-dynamodb-adapter 使用教程

    OpenID Connect（OIDC）是一种用于网络身份验证的协议，在 Web 开发中得到广泛应用。OIDC Provider 是 OIDC 的服务器端实现。oidc-provider-dynamo...

    3 年前
  • npm 包 angled-edges 使用教程

    介绍 在前端开发中，有时我们需要将矩形图形切割成有角度的图形。而用 CSS 实现需要用到复杂的 transform、skew 等属性，操作繁琐。npm 包 angled-edges 则可以非常简单地快...

    3 年前
  • npm 包 ilp-plugin-payment-channel-framework 使用教程

    前言 在实际开发中，我们经常需要对支付进行处理。对于支付流程的设计，虽然支付方式千差万别，但是在实现上都有共性的地方。支付通道（Payment Channel）是一种广泛用于移动支付和区块链支付等场景...

    3 年前
  • npm 包 ngx-resource 使用教程

    前言 对于前端工程师来说，使用一些现有的开源库能够大大提高开发的效率，而在 AngularJS 框架中使用 ngx-resource 就是一种不错的选择。本文将会详细介绍如何使用该 npm 包，并且通...

    3 年前
  • npm 包 simple-morse 使用教程

    简介 Morse 码是一种用电信号（主要是电报）来编码的信息交流方式，它将字母、数字等字符按照一定的规则映射成符号序列。 simple-morse 是一个基于 JavaScript 的 npm 包，它...

    3 年前
  • npm 包 tyutil 使用教程

    如今在前端领域，npm 打包工具是常用的工具之一，配合 Node.js 和 Webpack 使用，可以帮助项目进行依赖管理和管理包的版本等。除了常见的 lodash、moment 等包，我们还可以使用...

    3 年前
  • npm 包 eg-init 使用教程

    前言 在前端项目开发中，我们通常需要用到各种第三方库和工具，这些库和工具需要通过 npm 包来进行安装和管理。其中，npm 包 eg-init 是一款可以快速创建基础开发框架的工具，本文将为大家介绍如...

    3 年前
  • npm 包 helmeta 使用教程

    在前端开发中，网站头部的 meta 标签对 SEO 和网站性能优化非常重要。helmeta 是一个简单易用的 npm 包，可以帮助我们很方便地生成和管理网页的 meta 标签。

    3 年前
  • npm 包 ng-infinitescroll 使用教程

    在前端开发中，无限滚动是一个常见的功能。如果网站有大量数据需要展示，这个功能就显得尤为重要。为了实现无限滚动，开发人员需要写很多繁琐的代码。但是，现在有一个 npm 包能够帮我们轻松实现无限滚动功能，...

    3 年前
  • npm 包 supreme-log 使用教程

    在开发过程中，日志是非常重要的。在前端项目中，我们借助 npm 包来处理日志输出非常方便。在这里，介绍一个使用简单且功能强大的 npm 包——supreme-log。

    3 年前
  • npm 包 aws-athena-client 使用教程

    前言 AWS Athena 是一种交互式查询服务，可以让您使用标准 SQL 对 Amazon S3 中的数据进行查询。AWS Athena 可以与多种编程语言集成，其中包括 JavaScript。

    3 年前
  • npm 包 fasttext-native 使用教程

    简介 fasttext-native 是 fasttext 的 Node.js 接口，是一个快速、高效的文本分类器和向量化工具。 本教程将详细介绍 fasttext-native 的安装和使用方法，希...

    3 年前

相关推荐

    暂无文章