How to fix svg-sprite-loader exception?

How to fix: svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode

[pkarev]

I spent a whole bunch of time in order to fix this warning (i’m using symfony webpack encore).

The reason was that webpack encore has it’s default file loader for all kind of image assets and it applies it always the last.

My solution is to add in your webpack config next code:

1.Disable default image loader in order to avoid svg-sprite-loader exception:
.disableImagesLoader()

2.And then enable it again excluding the path with svg assets that i use for generate sprite in extract mode:

.addRule({   
    test: /\.(png|jpg|jpeg|gif|ico|svg|webp)$/,   
    loader: 'file-loader',   
    exclude: [your_path_to_svg_assets],
    options: {
        name: 'images/[name].[hash:8].[ext]',
    }
})

Hope, this will save time to somebody.

[roblevintennis]

svg-sprite-loader works fine with background-image url use case. E.g. you have something like background-image: url(path/to/yoursvg.svg in your css, but then also icons that need to be built out in your app…

I know this is closed but I too ran in to similar issues, in my case ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin, but I thought I’d drop back in my notes on what definitely worked for us using svg-sprite-loader in Webpack.

There are probably other options, but we use url-loader for our general image loading and for SVGs it will convert the background-image url to use a base 64 encoded. The webpack rule for our images is:

module.exports = {
  test: /\.(png|jpe?g|**svg**|gif|eot|ttf|woff|woff2|ico)(\?(r=)?[\d-]+)?$/,
  exclude: [
    /frontend\/svgs\/.+\.svg$/,
    /\/public\/images\/svg_builder\/svgs\/mavenlink-js\/.+\.svg$/,
  ],
  loader: 'url-loader?limit=10000',
};

As you see we’re testing for several image types, one which is SVG. Also important is that we exclude the paths we want svg-sprite-loader (and svgo in our case) to work on.

With that, you can simply do the inverse and include those folders in your svg-sprite-loader configuration rule. So we’ve essentially got a couple of “icon directories” (handled by sprite loader and friends), and then all other directories which will get handled by our general loader.

Here’s the config I currently have for the sprite generation:

module.exports = {
  test: /\.svg$/,
  include: [
    /frontend\/svgs\/.+\.svg$/,
    /public\/images\/svg_builder\/svgs\/mavenlink-js\/.+\.svg$/,
  ],
  use: [
    {
      loader: 'svg-sprite-loader',
    },
    {
      loader: 'svgo-loader',
      options: {
        plugins: [...],
      },
    },
  ],
};

A couple of things we learned which are probably obvious but important are:

• You can absolutely have multiple test cases that match on the same thing e.g. /\.svg$/
• include and exclude usually work with strings, but you can use regex as we have. But, it’s very intuitive to think of these as using globbing if you’ve worked with other tools like grunt, gulp, etc., but these are strict regex! So we had the error of doing \/*\.svg thinking that the wildcard would glob, but no, it needs to be \/.*\.svg.
• We the realized we did not need the extension in regex because our test already checks that! So our next iteration will remove that.

But the point is it’ll totally work!

Sorry for verbose comment, but I think many folks likely have this issue like I did, but svg-sprite-loader will totally work in tandem with inline CSS background-image url uses and I thought it’d be useful to leave this here!