use data-url both in js and css about svg-url-loader HOT 7 CLOSED

@iapYang you're doing everything correct.
If the most of your icons are referred from SCSS you should put noquotes: false in your webpack config.
But as you've correctly noticed that will break icons in case you are referring them from JS. In order to fix that you should explicitly pass noquotes option for each require from JS. That is, currently in your JS you're writing:

var icon = require('../../image/ignore/arrow.svg')

You should replace that by

var icon = require('!!svg-url-loader?noquotes!../../image/ignore/arrow.svg')

Let me know if this works for you.

from svg-url-loader.

@bhovhannes
Thanks a lot! This works really fine to me.
But in another case, If the most of my icons are referred from JS and I set noquotes: true, is there any way to render it correctly in scss in this case?

Thanks for the help!

from svg-url-loader.

You may use different extension for SVG images which you are referring from scss (something like .scss.svg). And in webpack config have separate test patterns - one for matching .svg without .scss prefix and another one for matching .scss.svg.

from svg-url-loader.

@bhovhannes
Appreciate your patience! Your answer helps me a lot!

from svg-url-loader.

@iapYang I am closing this, feel free to open another issue if any.

from svg-url-loader.

What about using issuer?

cf https://webpack.js.org/configuration/module/#rule-issuer

from svg-url-loader.

I used issuer:

{
              test: /\.svg$/,
              issuer: {
                include: /\.(css|scss)$/
              },
              use: [{
                loader: 'svg-url-loader',
                options: {}
              }]
}

from svg-url-loader.