如何在 Laravel MIX 上创建 svg 精灵？答案

【问题标题】：How to create a svg sprite on Laravel MIX?如何在 Laravel MIX 上创建 svg 精灵？
【发布时间】：2018-01-14 22:18:30
【问题描述】：

我需要在 laravel mix 上配置构建 SVG 精灵。
我尝试了webpack下的几个库，result = 0。

有人可以建议如何配置吗？

在 webpack.mix.js 或 app.js 中何处编写处理程序代码？

【问题讨论】：

没有回答你的问题，但我遇到了这个问题，我只是决定停止使用 SVG sprites，基于this CSS-Tricks article:
这是个非常糟糕的主意。我通常有很多重复多次的图标。使用这种方法会增加代码输出量。

标签： laravel svg webpack laravel-mix svg-sprite

【解决方案1】：

一种让 SVG 精灵与 Laravel Mix 和 svg-spritemap-webpack-plugin 一起工作的方法。

先安装精灵图插件

npm install svg-spritemap-webpack-plugin --save-dev

然后像这样添加配置webpack.mix.js：

const mix = require('laravel-mix');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

// Set up the spritemap plugin
mix.webpackConfig({
    plugins: [
        new SVGSpritemapPlugin({
            src:'assets/svg/icons/*.svg',
            filename: '/svg/icons.svg',
            prefix: '',
            svg4everybody: true,
            svgo: {
                removeTitle: true,
                removeStyleElement: true,
                cleanupNumericValue: true,
            },
        })
    ]
});

// Adapt laravel-mix webpack config to better handle svg images.
Mix.listen('configReady', (webpackConfig) => {

    // Add separate svg loader
    webpackConfig.module.rules.push({
        test: /\.(svg)$/,
        include: /assets\/svg/,
        loaders: [
            {
                loader: 'file-loader',
                options: {
                    name: 'svg/[name].[ext]?[hash]',
                    publicPath: Config.resourceRoot
                }
            },

            {
                loader: 'img-loader',
                options: Config.imgLoaderOptions
            }
        ]
    });

    // Exclude local 'svg' folder from font loader
    let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/\.(woff2?|ttf|eot|svg|otf)$/))
    fontLoaderConfig.exclude = /(assets\/svg)/;

});

有了这个，您应该能够将 *.svg 文件添加到 /resources/assets/svg/*.svg 并复制到公共并获得由 /resources/assets/svg/icons/*.svg 制作的 svg sprite

【讨论】：