Can't inline SVG in stylesheets

[RadValentin]

There's a problem with using this loader in that it makes in impossible to load SVGs in stylesheets.

Would it be possible to change the output format to Data URI for certain file types? I'm thinking something similar to this approach.

.input {
  background-image: url('path/file.svg')
}

.output {
  /* current output ... this won't work */
  background-image: url('<svg>...</svg>');

  /* but something like this might work*/
  background-image: url('data:image/svg+xml;utf8,%3Csvg...');
}

[SathishGovindaraju]

I can confirm this is not working for SVGs in stylesheets. Any updates on this?

[sairion]

The transformation for data-format might be trivial, but I think it would be a bit hard to know if this (svg-inline) loader is being called from which loader. I assume you using css-loader?

[RadValentin]

Yes, I'm using style-loader + css-loader. I figured that there might not be an easy solution for this. Would it be possible to check against a path or extension given as a param to the loader? And only apply the transformation for files that match?

[sairion]

I tried looking into how css-loader works with this(svg-inline) loader and there is no way svg-inline can understand where the request is coming from. I though loader contexts would give some meta information but I could not find any (if there is anything, please someone let me know).

They also do not allow any queries for url(...) so unless someone fixes the css-loader (which I don't much want, they are tooo into css modules and all stuff) only way to fix this is, to have some kind of svg path convention and load it differently when a file follows the convention. I think it is pretty much like you mentioned above, @RadValentin.

While you are having trouble using css-loader + svg-inline I think you can try https://github.com/TrySound/postcss-inline-svg with some tweaked loader configurations. But I have seen a issue css-loader would break some result while using this postcss plugin, so I can't guarantee it works.

[peter-mouland]

for me, this isn't a bug as the whole point of the loader is to enable 'inline' use i.e. within the html.

for previous project where some svg's were still used as background images, we created a separate loader config in webpack and a separate directory for the background svg's

e.g.

      { test: /\.svg$/,
        include: [/styles\/icons\/background-svgs/],
        loader: 'url-loader' },
      {
        test: /\.svg$/,
        exclude: [/styles\/icons\/background-svgs/],
        loader: 'svg-inline'
      }

[adrianmarinica]

To make this work, I had to use a oneOf rule and path.resolve for the include and exclude rules, something like this:

{
    test: /\.svg$/,
    oneOf: [
        {
            exclude: path.resolve(__dirname, 'images/svg/css-icons/'),
            use: 'svg-inline-loader'
        },
        {
            include: path.resolve(__dirname, 'images/svg/css-icons/'),
            use: 'file-loader'
        },
    ],
},

[perevezencev]

I'm still experiencing this problem, nothing has changed by this point?