Svg-sprite-loader: No spritesheet generated with nuxt.js

[gregorvoinov]

HI,

I have a problem to get your svg-sprite-loader run with nuxt.js

my environment is:
[email protected]
[email protected]
[email protected]
[email protected]

in the nuxt.config.js I added the rule

extend (config, ctx) {
    config.module.rules.push({
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
    })

    config.module.rules.push({
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        exclude: /(assets\/svg)/,
        query: {
            limit: 1000, // 1KO
            name: 'img/[name].[hash:7].[ext]',
        }
    })

    config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: ['eslint-loader'],
        exclude: /(node_modules)/
    })
}

in my component .vue file I import the icon

<template>                    
    <svg>
        <use xlink:href="#fb"></use>
    </svg>
</template>
<script>
    import fb from './../assets/svg/fb.svg'
    export default {
        ...
</script>

and in the assets folder i created a svg folder and copied the fb.svg inside

i also tried this "hack" but with the same result
https://github.com/nuxt/nuxt.js/issues/1584

When I inspect the page there is no spritesheet injected into the dom

Did I miss something?

[kisenka]

You should decide which loader should process SVGs - url-loader or svg-sprite-loader, because now webpack uses both.

[gregorvoinov]

i have already tried it with the "hack" from https://github.com/nuxt/nuxt.js/issues/1584 or do you mean something other?

i also removed from "test: /.(png|jpg|gif|svg)$/," the svg "test: /.(png|jpg|gif)$/,"

[kisenka]

I need a demo then, because have no idea what nuxt.js is :)
Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[gregorvoinov]

Thank you for your help ;)
I created a repo
https://github.com/gregorvoinov/svg-sprite-loader

[kisenka]

@gregorvoinov I don't see hack you mentioned above in nuxt.config.js, the SVG is still processing via url-loader:

Following is worked for me:

// get and remove file loader
      const rule = config.module.rules.find(r => r.test.toString() === '/\\.(png|jpe?g|gif|svg)$/')
      config.module.rules.splice(config.module.rules.indexOf(rule), 1)

      // add it again, but now without 'assets\/svg'
      config.module.rules.push({
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader',
        query: {
          limit: 1000, // 1KO
          name: 'img/[name].[hash:7].[ext]'
        }
      })

      config.module.rules.push({
        test: /\.svg$/,
        use: 'svg-sprite-loader'
      })

[gregorvoinov]

thanks works perfect 👍

[gaven]

This method severely bloated my javascript bundles so I decided to create a module that inlines svgs at the top of the app.html file. Hope this helps someone. https://www.npmjs.com/package/nuxt-svg-sprite-module