3

I need to configure the build SVG sprites on laravel mix.
I tried several libraries under webpack, result = 0.

Can someone advise how to configure?

Where to write the handler code in webpack.mix.js or app.js?

Rajesh Murugan
  • 159
  • 15
korg
  • 197
  • 2
  • 8
  • 1
    Not answering your question, but I ran into this issue and I simply decided to stop using SVG sprites, based on [this CSS-Tricks article:](https://css-tricks.com/pretty-good-svg-icon-system/) – Cato Minor Sep 25 '17 at 14:34
  • It is very bad idea. I usually have a lot of icons that are repeated many times. Using this method increases the amount of code output. – korg Sep 27 '17 at 07:11

1 Answers1

2

One way I was able to get SVG sprites working with Laravele Mix & svg-spritemap-webpack-plugin.

First install the spritemap plugin

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

Then add config webpack.mix.js like that:

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)/;

});

With this You should be able to add *.svg files into /resources/assets/svg/*.svg that are copied to public and get an svg sprite made from /resources/assets/svg/icons/*.svg

Priit
  • 422
  • 1
  • 5
  • 15