I try to use Laravel Mix (v5.0.4) and extend it with SVG sprite loader to generate SVG sprite. I have the following folder structure:

resources/
  images/
    image.jpg
  sass/
    app.scss
  svg/
    file1.svg
    file2.svg

webpack.sprite.js
webpack.mix.js

The content of webpack.mix.js:

const mix = require('laravel-mix');
require('./webpack.sprite');

const toCss = 'public/css';

mix.sass('resources/sass/app.scss', toCss)
   .options({
       sassOptions: {
           outputStyle: 'nested',
       }
   })
   .sprite();

The content of webpack.sprite.js:

const mix = require('laravel-mix');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const path = require('path');

class Sprite {
    dependencies() {
        return ['svg-sprite-loader'];
    }

    webpackPlugins() {
        return new SpriteLoaderPlugin({plainSprite: true});
    }

    webpackRules() {
        return {
            test: /\.svg$/,
            include: path.resolve(__dirname, 'resources', 'svg'),
            use: [
                {
                    loader: 'svg-sprite-loader',
                    options: {
                        extract: true,
                        spriteFilename: path.resolve(__dirname, 'resources', 'images') + 'sprite.svg',
                        runtimeCompat: true
                    }
                },
                'svg-transform-loader',
                'svgo-loader'
              ]
        };
    }
}

mix.extend('sprite', new Sprite());

It does NOTHING in regards sprite, but it generates the CSS from SASS! :( I don't know why... Tried to "debug" it with some console.log() in the extension and it was hit, I saw the log messages in the console. But the sprite wasn't generated.

I also tried to use just hardcoded, relative paths in the extension without path. Didn't help.

Any idea?

Thanks in advance!

• Node.js version: v12 LTS
• webpack version: v4
• svg-sprite-loader version: Latest stable
• OS type & version: Win10

https://stackoverflow.com/questions/62517625/svg-sprite-issue-with-laravel-mix

I have the same issue. Does anyone have any suggestion.

For all poor souls coming across this issue:

There is a working implementation of svg-sprite-loader for laravel mix: https://github.com/swisnl/laravel-mix-svg-sprite

Installation:

yarn add laravel-mix-svg-sprite

Configuration

Example webpack.mix.js:

let mix = require('laravel-mix');
require('laravel-mix-svg-sprite');


/**
 * @see https://laravel-mix.com/docs/6.0/api
 */

mix.js('assets/js/custom.js', '')
    .sass('assets/scss/style.scss', '')
    .options({
        processCssUrls: false
    })
    .svgSprite(
        'assets/img',
        'sprite.svg',
        {
            extract: false // set to FALSE if the sprite should be loaded dynamically
        }
    )
    .sourceMaps(false)
    .setPublicPath('assets/dist');

Setting extract to true will only generate the svg file and you're resposible for importing it manually. Webpack can load it dynamically for you (just like intended by JetBrains) if you set it to false.