title: SVG not working with webpack 2 and url loader
body: <p>I can't make work svg-s with webpack 2. When bundle gets compiled I get a warning and when I load the page the svg-s are not showing up. I am guessing my webpack 2 config is working (although it's quite a mess at the moment) since png-s and jpg-s are properly loaded.</p>
  
  <p>Error:</p>
  
  <pre><code>WARNING in ./src/assets/wheels/19.svg
  (Emitted value instead of an instance of Error)   resolve-url-loader 
   cannot operate: CSS error
   /Users/asilo/Desktop/js/react/react-tesla-range-
   calculator/src/assets/wheels/19.svg:1:83: missing '{'
   at error (/Users/silo/Desktop/js/react/react-tesla-range-
   calculator/node_modules/css/lib/parse/index.js:62:15)
  </code></pre>
  
  <p>src/components/TeslaWheels/TeslaWheels.js</p>
  
  <pre><code>import './TeslaWheels.css';
  .......
  &lt;label className="tesla-wheels__item tesla-wheels__item--19"
  </code></pre>
  
  <p>src/componentes/TeslaWheels/TeslaWheels.css</p>
  
  <pre><code>.tesla-wheels__item--19 {
    background-image: url(../../assets/wheels/19.svg);
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>module.exports = {
    entry: [
      './src/index.js'
    ],
    output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use : [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react', 'stage-1']
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'svg-inline-loader',
            options: {
              query: {
                classPrefix: true,
                idPrefix: true
              }
            }
          },
          {
            loader: 'resolve-url-loader',
            options: {
              query: {
                publicPath: 'http://localhost:8080/'
              }
            }
          }
        ]
      },
      { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              query: {
                limit: 10000,
                mimetype: 'application/font-woff'
              }
            }
          }
        ]
      },
      { 
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              query: {
                publicPath: 'http://localhost:8080/',
                useRelativePath: true
              }
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              query: {
                bypassOnDebug: true,
                optiping: {
                  optimizationLevel: 7
                },
                gifsicle: {
                  interlaced: true,
                }
              }
            }
          ]
        }
      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    }
  };
  </code></pre>