在前端开发中，icon 的使用非常广泛。而随着业务的复杂度不断提高，icon 的数量也不断增多。一个页面中可能会用到数十个 icon，如果每个 icon 都需要发送一次请求，那么页面的加载速度就会受到很大的影响。所以，合并多个 icon 图片并将其转换为精灵图是一个很好的解决方案。而 npm 包 svg-classic-sprite-loader 则可以轻松地实现这个功能。
安装
在使用之前，我们需要先安装 svg-classic-sprite-loader。在终端中执行以下命令即可：
npm install svg-classic-sprite-loader --save-dev
使用
使用 svg-classic-sprite-loader 也很简单。我们只需要先将多个 icon 图片合并成一个 SVG 文件，然后使用 svg-classic-sprite-loader 将其转换为精灵图即可。
1. 合并 icon 图片
我们可以使用工具（如 gulp-svg-sprite）将多个 icon 图片合并成一个 SVG 文件。以下是示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ---------------------------
------------------- -- -- -
------ ----
-----------------------
------
-----------
----- -
------- -
----- -----
------- ------------
--
--
--
-
--------------------------
---上述代码将 src/icons/*.svg 目录下的所有 SVG 文件合并为一个名称为 icons.svg 的 SVG 文件，并将其保存到 dist/ 目录下。
2. 转换为精灵图
接下来，在项目中使用 svg-classic-sprite-loader。在 webpack.config.js 文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ----------------------------
-------- -
-------- -----
--------------- -------------
--
--
-
------- -----------------------
--
-
------- --------------
-------- -
-------- -
- ------------ ---- --
- -------------- - --------- ----- - --
- ---------------- ----- --
--
--
--
--
--
--
--
--在上述代码中，我们先使用 svg-classic-sprite-loader 将 SVG 文件转换为精灵图，并将其保存为名称为 sprite.svg 的文件，然后使用 svg-transform-loader 和 svgo-loader 对 SVG 进行必要的处理。
3. 在网页中使用
在页面上使用精灵图也很简单。我们只需要将精灵图中的 icon 使用 <use> 标签进行引用即可。以下是示例代码：
<svg> <use xlink:href="sprite.svg#icon1"></use> <use xlink:href="sprite.svg#icon2"></use> <use xlink:href="sprite.svg#icon3"></use> </svg>
学习意义
使用 svg-classic-sprite-loader 可以将多个 icon 图片转换为一个精灵图，这样可以极大地优化页面的加载速度，提高用户体验。同时，通过学习 svg-classic-sprite-loader 的使用，我们也可以了解到 webpack loader 的使用方法，为我们构建更加智能高效的前端项目提供帮助。
指导意义
svg-classic-sprite-loader 提供了一种轻松地将多个 icon 图片转换为精灵图的解决方案，对于需要使用大量 icon 的项目来说，是一个很好的选择。在使用时，我们也需要注意一些细节，如合并多个 icon 文件、配置 webpack，以及在页面上使用 <use> 标签等。同时，我们也可以将学习到的 webpack loader 知识应用在其他方面，提高自己的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66181