Solvedsvg sprite loader Exception: 2 rules applies to svg

Do you want to request a feature, report a bug or ask a question?
Question, i guess.

What is the current behavior?
Compiling fails because of my svg.
Failed to compile.
./src/_assets/svg/twitter.svg
svg-sprite-loader exception. 2 rules applies to /Applications/MAMP/htdocs/launchpad/src/_assets/svg/twitter.svg
@ ./src/_js/script.js 1:0-53
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/_scss/style.scss ./src/_js/script.js ./src/index.html

Some snippets of the files can be found here: https://gist.github.com/katiasmet/d5a4cc15592e58f56678f475b29b3b6b

What is the expected behavior?
Same as the example of the browser-sprite. Inline svg and using it with .

Please tell us about your environment:

  • Node.js version: v6.11.0
  • webpack version: 3.0.0
  • svg-sprite-loader version: 3.0.5 (svgo-loader: 1.2.1)
  • OS type & version: OSX Sierra

I use the Webpack dev server.

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
I tried different svg's so I don't think the svg is the problem. Maybe it's a conflict with the webpack dev server?

20 Answers

✔️Accepted Answer

@vercoelenmike
thx.. i found myself forget to add 'exclude'.. lol

  {
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')],  //
    options: {
      symbolId: 'icon-[name]',
    }
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/icons')],  // folders other than src/icons use url-loader
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

Other Answers:

@JimVercoelen @katiasmet @irodger

The problem here is that you are using more than 1 webpack rule for handling svg file types, so you prob. have a rule going for either images or fonts.

More Issues: