最近，越来越多的网站开始使用 SVG 图标代替传统的位图图标，SVG 的优势在于可以无限放大不失真，而且占用的空间更小，因此这种图标尤其适合用在高 DPI 的设备上。
在前端开发中，使用多个 SVG 图标并组合成一个雪碧图是一种非常常见的做法。这可以有效减少 HTTP 请求次数，提升网站的加载速度。本文将介绍一个 npm 包 totemcss-module-svgsprite，它可以帮助我们自动生成 SVG 雪碧图，大大简化了前端开发的工作。
安装
要使用 totemcss-module-svgsprite，首先需要在项目中安装它。在终端中运行以下命令：
npm install --save-dev totemcss-module-svgsprite
配置
在项目的 webpack.config.js 中配置 totemcss-module-svgsprite，示例如下：
const TotemCSSModuleSVGSpritePlugin = require('totemcss-module-svgsprite');
module.exports = {
//...
plugins: [
new TotemCSSModuleSVGSpritePlugin()
]
};上面的配置中，我们简单地将生成的雪碧图文件输出到了默认路径。如果需要自定义输出路径或文件名，可以通过传递参数来实现，示例如下：
new TotemCSSModuleSVGSpritePlugin({
outputFilename: 'icons.svg',
outputPath: 'assets/sprites'
})上面的配置将会生成名为 icons.svg 的雪碧图，并将它输出到 assets/sprites 目录下。
使用
在代码中使用 totemcss-module-svgsprite 生成的雪碧图非常简单。首先，确保 SVG 图标已经正确引入到了项目中。然后，通过类名引用 SVG 图标即可。例如：
<svg class="icon"> <use xlink:href="#icon-search"></use> </svg>
上面的代码中，class="icon" 会使得该 SVG 图标默认使用 totemcss-module-svgsprite 生成的雪碧图，而 xlink:href="#icon-search" 指定图标的名称。
示例
为了更好地说明 totemcss-module-svgsprite 的使用方法，下面提供一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------ ---------------
-------
----- -
-------- -------------
------ ----
------- ----
----- -------------
-
--------
-------
------
---- ----- --- -- ---
---- -----------------------------------
------- -------------- ---------- - -- ----
----- --------- ------- -------------- --------------- -------- --------- -------- --------- ------------- ------- ---- --- -------- ---- ---- ---- ------------------------ -------------------- -------- --------- --------- --------- --------- ---------------------------------- ----- - ----- ------ -------- ----- ---- ---- --- -------- ----------------- -------------------------
---------
------
---- -- ------------------------- --- --- -- ---
---- -----------------------------------
------
---- ----- ------------------------- ------ ---
-- -----------
------- ---------------- ---------- - -- ----
----- --------- ------------------------ ------ --------------- ---- ----- - ---- - ---- - - ---- - ------ ---- ---- ---- ---- ---- ---- - ------- -------------- ----------------- ---- ------------------------------------- ----------- -------------------------- ---- ---- --------- - ---- ---- ---- ---- - --------- --------- --------
---------
------- --------------- ---------- - -- ----
----- --------- ---------- ----------- --------- --- ---- --- --- --- --- --- ---- ------ ------- --- - ---- - ----- ------- ---- ---- ---- ---- ---- ---- ---- ---- ---------- ---------------------- --------- --------- --------- ------ --------- ----------------------------------------------------------- --------------------- --------- -------------------------------------- ---- - ---- - --------------------------------- --------- --------- ---- - ------ ---- ------- ------------------ ---- ---- ---- ---- ---- ---- ---- --- ---- ------------ ------ ---- - ------- -------- --------
---------
----
-------
------
---- ----- --- -- ---
---- -------------
---- ------------------------------
------
---- -- ------------------------- --- --- -- ---
---- -------------
---- --------------------------------
------
---- -- ------------------------- ------ --- -- ---
---- -------------
---- -------------------------------
------
-------
-------上面的代码中，我们使用了 totemcss-module-svgsprite 生成的两个 SVG 图标，以及一个自己定义的鸟儿 SVG 图标。这个例子演示了总体的使用方法，具体解释见代码注释。
结语
本文介绍了如何使用 npm 包 totemcss-module-svgsprite 自动生成 SVG 雪碧图，并演示了使用方法。这对于前端开发来说是一种非常实用的工具，可以显著提升网站的性能。如果您还没有尝试过使用 SVG 图标和 SVG 雪碧图，那么现在就该开始了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005753b81e8991b448ea480