npm 包 gulp-svg-sprites 使用教程

前言

在前端开发中，使用图标是常见的需求。为了提高网站性能和减小页面加载时间，将多个小图标合并成一个雪碧图是一个常用的优化方法。

gulp-svg-sprites 是一个基于 gulp 的 npm 包，用于将多个 svg 图标合并成一个 svg 雪碧图。它可以生成多种 css 格式，方便在网页中使用。本文将详细介绍该 npm 包的安装和使用，希望能帮助读者更好地应用它提升网站性能。

安装

要使用 gulp-svg-sprites，你必须先安装 gulp 和 gulp-svg-sprites 两个 npm 包。安装方法如下：

npm install gulp gulp-svg-sprites --save-dev

使用

我们以一个示例项目为例来演示如何使用 gulp-svg-sprites。该示例项目结构如下：

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

其中，icon 目录下存放多个 svg 图标，css 目录下存放生成的 css 文件。gulpfile.js 和 index.html 分别是 gulp 构建脚本和网页代码。

1. 在 gulpfile.js 中引入 gulp 和 gulp-svg-sprites，创建任务。

var gulp = require('gulp');
var svgSprites = require('gulp-svg-sprites');
 
gulp.task('sprites', function () {
  return gulp.src('icon/*.svg')
    .pipe(svgSprites())
    .pipe(gulp.dest('css/'));
});

这里创建了一个名为 sprites 的任务，它将 icon 目录中的所有 svg 文件合并成一个 svg 雪碧图，并在 css 目录下生成一个对应的 css 文件。

1. 在项目根目录中执行 gulp sprites，生成 svg 雪碧图和对应的 css 文件。

gulp sprites

执行完毕后，css 目录下应该生成了一个名为 icons.css 的文件。该文件中定义了多个类，每个类对应一个 svg 图标。使用该类后，可以在网页中显示对应的图标。

1. 在 index.html 中引入生成的 css 文件。

<link rel="stylesheet" href="css/icons.css">

1. 在 index.html 中使用生成的图标。

<span class="icon icon1"></span>

这里使用了一个名为 icon1 的类，它对应一个 svg 图标。

配置

gulp-svg-sprites 支持多种配置项，可以自定义生成的 css 格式和输出路径等选项。

cssFile

指定生成的 css 文件名，默认为 sprites.css。

.pipe(svgSprites({ cssFile: 'icons.css' }))

cssOpts

指定生成的 css 格式，可以是 css, scss, less 或 stylus 等等。默认为 css。

.pipe(svgSprites({ cssOpts: 'scss' }))

padding

指定生成的每个雪碧图之间的间隔，默认为 2。

.pipe(svgSprites({ padding: 4 }))

更多配置项可以参考 npm 包的官方文档。

总结

使用 gulp-svg-sprites 将多个 svg 图标生成一个 svg 雪碧图，是前端开发中提高网站性能的常用技巧。本文介绍了 npm 包 gulp-svg-sprites 的安装和使用，帮助读者更好地应用它提升网站性能。希望本文能够对信息中心的前端技术爱好者有所帮助。

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