@ayctor/laravel-mix-svg-sprite 是一个方便前端开发者使用的 npm 包，它可以将多个 SVG 文件合并成一个 SVG Sprite，并生成对应的 CSS 文件。在前端开发中，我们经常使用 SVG 图标，而将多个 SVG 图标打包成一个 SVG Sprite 可以提高页面加载速度，并减少文件的数量。本文将详细介绍如何使用 @ayctor/laravel-mix-svg-sprite。
安装
首先，我们需要在项目中安装 @ayctor/laravel-mix-svg-sprite。可以使用 npm 或者 yarn 进行安装：
npm install @ayctor/laravel-mix-svg-sprite --save-dev
yarn add @ayctor/laravel-mix-svg-sprite --dev
安装完成后，在项目中找到 webpack.mix.js 文件，在文件开头添加以下代码：
const mix = require('laravel-mix');
const svgSprite = require('@ayctor/laravel-mix-svg-sprite');
mix.extend('svgSprite', new svgSprite());然后，在命令行中执行以下命令：
mix svgSprite
这样我们就已经成功安装并配置好了 @ayctor/laravel-mix-svg-sprite。
使用
在安装完毕之后，我们就可以开始使用 @ayctor/laravel-mix-svg-sprite 了。首先，我们需要将 SVG 图标文件放在指定的目录下。默认情况下，@ayctor/laravel-mix-svg-sprite 会在项目根目录下创建一个 "resources/svg" 目录，我们可以在这个目录下放置 SVG 文件。也可以通过配置文件来指定自定义的目录。
接着，在 webpack.mix.js 文件中添加以下代码：
mix.svgSprite('resources/svg/*.svg', 'public/svg/sprite.svg');这行代码的意思是将 resources/svg 目录下所有的 SVG 文件打包成一个名为 sprite.svg 的 SVG Sprite，并输出到 public/svg 目录下。
当然，我们也可以在打包的过程中引入一些配置选项，比如添加 className，设置 viewBox，设置 sprite 的 ID 等。我们可以通过以下代码来设置：
mix.svgSprite('resources/svg/*.svg', 'public/svg/sprite.svg', {
className: 'svg-icon',
viewBox: '-50 -50 100 100',
spriteId: 'svg-sprite'
});这个配置实际上是一个对象，在对象中可以设置一些选项，具体如下：
- className：设置每个 SVG 图标的 class 名称，默认为 "svg-symbol"。
- viewBox：设置 SVG Sprite 的 viewBox，默认为 "0 0 0 0"。
- spriteId：设置 SVG Sprite 的 ID，默认为 "svg-sprite"。
示例代码
以下是一个完整的示例代码，供参考：
-- -------------------- ---- -------
----- --- - -----------------------
----- --------- - ------------------------------------------
----------------------- --- -------------
------------------------------------ ------------------------ -
---------- -----------
-------- ---- --- --- -----
--------- ------------
---以上就是使用 @ayctor/laravel-mix-svg-sprite 的方法以及示例代码。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d7f