简介
svg-sprite-plugin-fork 是一个 npm 包，它可以将多个 SVG 图标合并成一个雪碧图，并自动生成对应的 CSS 样式。它可以优化网页的加载速度，减少 HTTP 请求次数，帮助网站更快的加载，提高用户体验。
安装
npm install svg-sprite-plugin-fork --save-dev
使用方法
在配置文件中，使用 svg-sprite-plugin-fork 生成雪碧图。
-- -------------------- ---- -------
----- ------------------ - ----------------------------------
----- ---- - ----------------
-- ------- ----
-------------- - -
-- ---
-------- -
--- --------------------------------------- --------------------------- -
------- -
--------- -
-- -- ---
---- -
--------------- ------
------------------- -----
--
-- ---------
------- ------
---- -----
--
-- ------------
------- --------
--------- ----------------
----------- ---------- -----------
----- -----
--
-- ------
--
-
--在 HTML 中引用
<svg> <use xlink:href="img/icons.svg#icon-test"></use> </svg>
配置选项
sprite （必填）
此选项确定了生成的雪碧图的属性，包括名称，路径，大小等等。
prefix: string- 可选，String，图标的前缀，用于避免文件名相同的冲突。默认值是
icon-。
- 可选，String，图标的前缀，用于避免文件名相同的冲突。默认值是
filename: string- 可选，String，定义您要生成的雪碧图的路径和名称。支持绝对路径和相对路径。默认值是
img/sprite.svg。
- 可选，String，定义您要生成的雪碧图的路径和名称。支持绝对路径和相对路径。默认值是
dimensions: string[]- 可选，String[]，size 可选属性的数组，将在每个符号元素中创建一个宽度和高度属性。默认值是
[]，表示不包括 size 属性。
- 可选，String[]，size 可选属性的数组，将在每个符号元素中创建一个宽度和高度属性。默认值是
bust: boolean- 可选，Boolean，bust cache 是否开启。默认值为
false。
- 可选，Boolean，bust cache 是否开启。默认值为
generate: {}可选，Object，生成雪碧图的选项。
svg: {}可选，Object，SVG 压缩选项。
xmlDeclaration: boolean- 可选，Boolean，是否在生成的 SVG 文件中包含 XML 声明。默认值为
false，表示不包含 XML 声明。
- 可选，Boolean，是否在生成的 SVG 文件中包含 XML 声明。默认值为
doctypeDeclaration: boolean- 可选，Boolean，是否在生成的 SVG 文件中包含 doctype 声明。默认值为
false，表示不包含 doctype 声明。
- 可选，Boolean，是否在生成的 SVG 文件中包含 doctype 声明。默认值为
symbol: boolean- 可选，Boolean，是否要为背景定位的图标生成一个程序化的 SVG。默认值为
false，表示不生成 Basic symbols。
- 可选，Boolean，是否要为背景定位的图标生成一个程序化的 SVG。默认值为
use: boolean- 可选，Boolean，是否在样式和元素清单中包含链接, 这只有当使用
<symbol>元素作为 SVG 标志的容器时才有意义。默认值为false。
- 可选，Boolean，是否在样式和元素清单中包含链接, 这只有当使用
input
可选的。可以是字符串或对象的数组，指定输入文件的路径。文件将被解析为 SVG，并将它们包含在符号定义中以生成雪碧图。
new SVGSpritemapPlugin(['src/foo/bar.svg', 'src/baz/qux.svg'], sprite, options)
您也可以使用 glob 模式指定多个文件。例如，要从 assets 目录中加载所有 SVG 文件，请使用以下代码：
new SVGSpritemapPlugin('assets/**/*.svg', sprite, options)output
可选的。指定每个文件的输出选项。
-- -------------------- ---- -------
--- ------------------------- ------- -
------- -
-- ----------- ---------- ----- ---------- ---
--------- -------------------------------
-- ---------------
------ -----
-- ---------------- ------- ------------
-- ---- ---- -----------------
-- --------- --- -----
-- --- ------------------------
-- ------ ---------
--------- ----------------------------------
-
-- ------
--styles
可选的。指定要生成的样式类型和其他选项。
-- -------------------- ---- -------
--- ------------------------- ------- -
------- -
-- ------------ -- -------- --- --
-- ----- -------------------- --- ------
---------- ------
--- --------
-- ----------- --- ----- ---------- ---
--------- -------------------------
-- -- ------ -------------
-- -------------- ------
------- -------- -- -------- ---------------
-- ------------
-- ------------------------------- ----
-- ----------------
------ ------
-- --- ---------------------------------------
-- -------- ------
----------- --------
-- -- --- ----------------------
-- -- --------- - ------ ------------
-- -- --- - ------ - -------------- ---------------------------------- - ------- ---
-- -------- --- ---
-------------- - -------- ----- -
--------------- - -------- ------------- -
---- ---------- --- - ------ --- --------- --- ------- --- ---------- --- -
---- ------------- ---------------- --- ---- - ----- ------------- -
--------- ------- -- -
-- ---- ------ --------
--
-- ------------------
-- -------- -------- ----- ---- ----- - -------- --------
---------- -
-- --
------ -- -
-- ---- ------ --------
--
-- --
-
------ ------
--------- ------------
-
--
-- -------------
-- ----------- ----- --------------
-- --------------------
------- -
------ ----------
------ ---------
--
-- ---- ------ --- --------
------- -----
-
-- ------
--spriteAttrs
可选的。在生成的雪碧图上设置指定的属性。
new SVGSpritemapPlugin(input, {
spriteAttrs: {
'aria-hidden': true
}
})symbolAttrs
可选的。在生成的每个符号元素上设置指定的属性。
new SVGSpritemapPlugin(input, {
symbolAttrs: {
'aria-label': 'Label Text'
}
})svgoConfig
可选的。SVGO（SVG 优化器）配置选项。
- 参考 SVGO 配置。
-- -------------------- ---- -------
--- ------------------------- -
----------- -
------------ -----
------------------ -----
------------ ------
------------------ -----
----------- ----
-
--chunk
可选的。指定要在哪个 chunk 中链接生成的 JavaScript。
new SVGSpritemapPlugin(input, sprite, {
chunk: 'my-chunk'
})watch
可选的。如果设置为 true，则监视输入文件的变化并重新生成 sprite。
new SVGSpritemapPlugin(input, sprite, {
watch: true
})emitSymbols
可选的，默认值为 true。此选项确定是否在 build 输出目录中存储符号定义。如果状态为 false，该文件将设置为 webpack 信息中的公共资源。
new SVGSpritemapPlugin(input, sprite, {
emitSymbols: false
})outputPath
可选的。可以是字符串或函数，指定生成的 SVG 输出的路径。
new SVGSpritemapPlugin(input, sprite, {
outputPath: (svg) => `./resources/sprites/${svg.sprite.symbol.config.mode}/${svg.basename}`
})transformData
可选的。指定在生成的雪碧图中使用统一数据。
new SVGSpritemapPlugin(input, sprite, {
transformData: data => {
data.svg.textifyStyles = true;
return data;
}
})customTemplates
可选的。自定义模板配置。
new SVGSpritemapPlugin(input, sprite, {
customTemplates: {
css: 'path/to/your/template.hbs',
demo: 'path/to/your/template.ejs'
}
})示例代码
下面是一个完整的 webpack 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------ - ----------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
-------- -
--- --------------------------------------- ----------------------------- -
------- -
--------- -
-- -- ---
---- -
--------------- ------
------------------- -----
--
-- ---------
------- ------
---- -----
--
-- ------------
------- --------
--------- ----------------
----------- ---------- -----------
----- -----
--
-- ------
------- -
--------- ------------------------------------------
--
------- -
----------- ---------------
------- --------
--------- --------------------------------------------
------- -----
------- -------------
--------- -------------------
----- ------
------- ------------------
------- ---------
-------------
-------
---------
-------------- ---- - ------ ------------- ------ -----
--------- --- ------ -----
---- ------ ---------- -
-------- -------------
------ --------
----------- -------
--------------- --------
-- -- -------- - --
------- --
-------- --
------- -----
------ --- --------- -- - -----
------- --- ---------- -- - -----
-- - --
-
-- --- ---- ------ -- ------------ -
--- ---- - ------- --
---- ------ ----- ---- -- -
-------------------- --- ----------------------------------- --
--- ----------------------------------- ---
------ --- -------------------------------- ---
------- --- --------------------------------- ---
-
-- - ----
------------------- -
---------------------- - -----
------ -----
-
--
------ ----
--
--
------- -
------ -
- ----- --------- ---- ---------------- ------------- --
- ----- --------- ---- ------------ --
- ----- ------------------------------ ---- ------------- --
- ----- ----------------------- ---- ------------- --
- ----- -------------- -------- --------------- ---- -------------- --
--
--
--其它相关 npm 包依赖
yarn add -D svg-sprite-loader html-webpack-plugin
总结
svg-sprite-plugin-fork 是一个非常实用的 npm 包，它可以在不降低网站性能的情况下，提高用户体验。我们可以将多个 SVG 图标合并成一个雪碧图，并自动生成对应的 CSS 样式。本文介绍了配置选项、安装、使用方法等详细教程，并附有示例代码。希望本文可以帮助读者使用这个强大的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005697481e8991b448e4d6e