use data-url both in js and css

[iapYang]

Hi there,
Thank you for your awesome work.
i've been use it for quite a moment, but today something went wrong.

I tried to use it in scss, like
background-image: url('../../image/ignore/arrow.svg');

But it didn't work fine,
it went out
background-image: url(data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='25px' viewBox='0 0 18 25' enable-background='new 0 0 18 25' xml:space='preserve'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFFFFF' d='M17.338,12.485c-4.156,4.156-8.312,8.312-12.468,12.467 c-1.402-1.402-2.805-2.804-4.207-4.206c2.756-2.757,5.513-5.514,8.27-8.27C6.176,9.72,3.419,6.963,0.663,4.207 C2.065,2.805,3.468,1.402,4.87,0C4.812-0.059,17.425,12.562,17.338,12.485L17.338,12.485z'/%3E %3C/svg%3E);

it should be like
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjI1cHgiIHZpZXdCb3g9IjAgMCAxOCAyNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTcuMzM4LDEyLjQ4NWMtNC4xNTYsNC4xNTYtOC4zMTIsOC4zMTItMTIuNDY4LDEyLjQ2N2MtMS40MDItMS40MDItMi44MDUtMi44MDQtNC4yMDctNC4yMDZjMi43NTYtMi43NTcsNS41MTMtNS41MTQsOC4yNy04LjI3QzYuMTc2LDkuNzIsMy40MTksNi45NjMsMC42NjMsNC4yMDdDMi4wNjUsMi44MDUsMy40NjgsMS40MDIsNC44NywwQzQuODEyLTAuMDU5LDE3LjQyNSwxMi41NjIsMTcuMzM4LDEyLjQ4NUwxNy4zMzgsMTIuNDg1eiIvPjwvc3ZnPg==);

After I check the API, I set the
noquotes: false,

It works fine again, but the svg source I required in js doesn't work fine again.

Is there an another way to use data-url both in js and css? If yes, is it supported by this loader?

Thanks for the help!

[bhovhannes]

@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.

[iapYang]

@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!

[bhovhannes]

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.

[iapYang]

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

[bhovhannes]

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

[Mouvedia]

What about using issuer?

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

[zcaceres]

I used issuer:

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