为了避免这种情况，我们需要使用到雪碧图将这些图标整合到一张图片上，再使用CSS背景及其定位，将需要显示的图标移动到元素背景中。

传统方式，我们需要将图标拼接到一张图片上，计算好位置信息，这种方式维护起来比较麻烦。自从有了打包工具grunt、gulp和webpack之后，这一切似乎容易了许多。这里我重点介绍webpack雪碧图插件webpack-spritesmith的使用。

雪碧图插件 webpack-spritesmith 详解

本人是在 vue-cli 中增加了该雪碧图插件，关键步骤如下，细节上以 vue-cli 为背景，其他框架类似配置。

1. 安装配置

首先在项目中按照官方说明 install 之后，在 bulid/webpack.base.conf.js 中进行如下配置。需要说明的是，雪碧图是开发模式和生产模式都要使用的功能，因此我们在 webpack 的基础配置中进行设置。

1.1 首先引入插件 const SpritesmithPlugin = require('webpack-spritesmith');；

1.2 其次在 module.rules 将 png 图标的默认配置注释掉，避免 url-loader 将其编译成行内图片，同时单独设置 png 图标的配置，如下：

1.3 接着在 webpack 的配置对象中找到 plugins 属性（没有请自行创建），添加雪碧图的处理。基本配置如下：

这里我使用的是CSS定制方式，即在 target.css 中，配置对应的format函数名 function_based_template（注意数组元素的层次关系，切勿配错）。然后在 customTemplates 中配置对应名称的属性名。

这里我引用了自定义函数 templateFunction，该函数基本参考了官方示例。由于本人使用的是二倍图，所以此处使用了图片缩放和垂直居中的方式。大家选择参考：

其实关键之处就是利用定制函数，将参数中每个图标的信息用来进行样式的定制。这些信息中包括图标名、宽高和在雪碧图中的位置信息等。

当然我们也可以将目标生成成 less 文件，然后再进行使用（示例代码中注释部分）。但本人发现会生成大量变量，而这些变量我们并不经常使用，所以本人没有采用这种方式。

2. 使用方法

进行完上述配置之后，再在我们配置的源文件夹中添加我们需要处理的图标。然后启动 vue-cli 的开发者模式 npm run start（其他框架，运行对应命令）。

启动完成之后，我们可以发现在目标目录下生成了 sprites-generated.png 和 sprites-generated.css 两个文件。在样式文件中，形如：

接下来就是在使用组件中引用上述样式即可。

3.遇到的问题

3.1 放大页面时，有些雪碧图标边缘出现相邻图标的边缘，从而出现白线，怎么破？