Support for SVG in CSS files

This is a great loader, but it shouldn’t break when the svg file is loaded by an scss file. As in this example:

.foo {
   background-image: url(images/icon.svg);
}

Currently, these images are loaded as [object Object] strings.

[P0lip]

There is a very clean way to achieve it. Just use the issuer field, which should be equal to file that initiated the import.

// In your webpack config
{
  test: /\.svg$/,
  issuer: /\.jsx?$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

If you have any other loaders (like file-loader etc.) matching /\.svg$/ pattern, you may need to apply that rule for them as well, i.e. issuer: /\.s?css$/,

[andersaloof]

Could also be fixed by separating SVG files used in JS and CSS into two different folders, and adjust the webpack config to only use react-svg-loader on SVG files in one of the folders…

test: /.svg-js(.*)\.svg$/,