Can't inline SVG in stylesheets about svg-inline-loader HOT 7 OPEN

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'
      }

from svg-inline-loader.

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'
        },
    ],
},

from svg-inline-loader.

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

from svg-inline-loader.

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?

from svg-inline-loader.

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?

from svg-inline-loader.

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.

from svg-inline-loader.

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

from svg-inline-loader.