Nuxt.js: Nuxtjs + Vue-svg-loader

[danciupuliga]

I am trying to integrate https://www.npmjs.com/package/vue-svg-loader for loading SVG icons inline as vue components.

I have the following in my nuxt.config file:

{
    test: /\.(svg)$/,
    loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x 
 }, {
    test: /\.(png|jpe?g|gif|svg)$/,
    loader: 'url-loader',
    exclude: /(\/icons)/,
    query: {
        limit: 10000, // 10KO
        name: 'img/[name].[hash].[ext]'
    }
}

It seems that the svg files are still being converted to base64 by the url-loader even though I have excluded the path to the svg directory.

Is there a different way to overwrite the url-loader to ignore svg files?

_{This question is available on Nuxt.js community (#c1182)}

[josantana]

Hi, @danciupuliga.

I think you need to remove svg from this line, like so:

    test: /\.(png|jpe?g|gif)$/,

The second rule seems to be overwriting the first one.

[josantana]

@danciupuliga, another thought: Are you using nuxt 1.0.0-rc3 or later? If so, maybe the problem is that you are applying those loader rules on:

build: {
    loaders: [ ... ]
},

If you check RC3 breaking changes, you'll notice that the "build.loaders has been removed". You should place your custom rules directly on build.extend, instead. This is how I am applying my SVG rules right now:

build: {
    extend(config, ctx) {
        // Find default SVG rule
        let imgRuleIndex = null;
        for (let i = 0; i < config.module.rules.length; i += 1) {
            if (config.module.rules[i].test.toString().match('gif')) {
                imgRuleIndex = i;
                break;
            }
        }
        const imgRule = config.module.rules[imgRuleIndex];
        // Overwrite the default images rule, removing SVG from it
        config.module.rules[imgRuleIndex] = {
            test: /\.(png|jpe?g|gif)$/,
            loader: imgRule.loader,
            query: imgRule.query,
        };
        // Now, add your own SVG rule
        config.module.rules.push({
            test: /\.svg/,
            loader: <YOUR-FAVORITE-LOADER>, // 'vue-svg-loader', 'svg-sprite-loader', 'svgo-loader'... you choose. ;)
        });
    },
},

[KonstantinVlasov]

Or you can try this shorter variant:

  build: {
    extend (config) {
      const urlLoader = config.module.rules.find((rule) => rule.loader === 'url-loader')
      urlLoader.test = /\.(png|jpe?g|gif)$/

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'svg-inline-loader',
        exclude: /node_modules/
      })
    }
  }

[danciupuliga]

thanks @KonstantinVlasov that worked!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.