Vue-svg-loader: Usage with url-loader

[MattCCC]

Hi everyone,

firstly, thank you for a great loader! Works very well, although I'd like to use vue-svg-loader with url-loader. vue-svg-loader for Vue components and url-loader for css files. Before to use vue-svg-loader I had the following rule:

        {
          test: /\.(svg|svgz)(\?.+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: 'svg/[name].[ext]'
              }
            },
            {
              loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
              options: {
                // optional [svgo](https://github.com/svg/svgo) options
                svgo: {
                  plugins: [
                    {removeDoctype: true},
                    {removeComments: true}
                  ]
                }
              }
            },
          ]
        },

However they don't seem to work together with vue-svg-loader.

[visualfanatic]

Hello, thank you for the kind words! If you want to use those two loaders, each one in a different scenario, you need to slightly modify your config:

1. Change use into oneOf.
2. Add resourceQuery: /inline/ to the object that contains the vue-svg-loader config.

webpack needs to know explicitly when to use a particular loader, to do this you need to use the resourceQuery, this way you can differentiate what loader should be used:

// url-loader
.test {
  background-image: url("./assets/icon.svg");
}

```js
// vue-svg-loader (note the "?inline" query string)
import IconComponent from './assets/icon2.svg?inline';

Your configuration with the changes:
```js
{
  test: /\.(svg|svgz)(\?.+)?$/,
  oneOf: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: 'svg/[name].[ext]',
      },
    },
    {
      resourceQuery: /inline/,
      loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
      options: {
        // optional [svgo](https://github.com/svg/svgo) options
        svgo: {
          plugins: [
            { removeDoctype: true },
            { removeComments: true },
          ],
        },
      },
    },
  ],
},

[Vlaoff]

@visualfanatic

Add resourceQuery: /inline/ to the object that contains the vue-svg-loader config.

What do you mean by this ?

[visualfanatic]

I meant modifying this object:

{
  loader: 'vue-svg-loader',
  options: {
    svgo: {
      plugins: [
        { removeDoctype: true },
        { removeComments: true },
      ],
    },
  },
},

... so that it would contain the resourceQuery property:

{
  loader: 'vue-svg-loader',
  resourceQuery: /inline/,
  options: {
    svgo: {
      plugins: [
        { removeDoctype: true },
        { removeComments: true },
      ],
    },
  },
},

[visualfanatic]

@Vlaoff could you tell me if you still have described issue?

[Vlaoff]

@visualfanatic no, you helped me solve it, thank you 😄

[visualfanatic]

@Vlaoff No problem at all! 👍