why do I have to specify noquotes here but not in url-loader? about svg-url-loader HOT 10 CLOSED

you can also use webpack resource queries to determine which loader option you want to use for a given file extension.

{
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /css/,
      use: "svg-url-loader",
    },
    {
      resourceQuery: /js/,
      use: {
        loader: "svg-url-loader",
        options: {
          noquotes: true
        }
      }
    },
  ],
},

to import in javascript
import logo from 'logo.svg?js'
to import for css (or compiled languages such as less and sass)
require('logo.svg?css')

from svg-url-loader.

Meet the same problem, looking for a solution.
While setting noquotes: true,
// woubld be invalid if bg.svg is tranformed into inline svg
.bg { background: url('~images/bg.svg') }

<img src="~images/bg.svg" // would be valid in this case

Otherwise, setting noquotes: false
// woubld be valid if bg.svg is tranformed into inline svg
.bg { background: url('~images/bg.svg') }

<img src="~images/bg.svg" // would be invalid in this case

from svg-url-loader.

Guys, you need to specify noquotes option in image case and do not specify it in css case.
You have to explicitly override loader options in order to achieve that.

But that way you'll have 2 separate images in your bundle. Perhaps it will be better to use url-loader in terms of smaller bundle size...

from svg-url-loader.

Thanks for your attention.@bhovhannes
So you suggest us use url-loader? But I don't want inline svg base64 encoded.

from svg-url-loader.

@QoVoQ in your example you've mentioned the same image - bg.svg used in 2 different ways. In that case url-loader will give you a smaller bundle size, because bg.svg will be included only once in the final bundle.
In order to use svg-url-loader, you should tell webpack to use noquotes parameter in one case and not to use in the other one. It is totally possible.

from svg-url-loader.

from svg-url-loader.

@fringd , you have to explicitly pass noquotes option every time for each img tag

from svg-url-loader.

from svg-url-loader.

from svg-url-loader.

from svg-url-loader.