svg-sprite-loader not working in nuxt.js application

[unwrittenmike]

Do you want to request a feature, report a bug or ask a question? Report a bug What is the current behavior? Compiled with 1 warnings
warning in ./assets/icons/big-loader.svg svg-sprite-loader exception. 2 rules applies to What is the expected behavior? No warnings and sprite to load If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. config.module.rules.push({ test: /\.svg$/, loader: 'svg-sprite-loader' })

import test from '~/assets/icons/big-loader.svg'

Please tell us a bout your environment:

• Node.js version: v8.1.4
• webpack version: 3.5.5
• svg-sprite-loader version: 3.2.4
• OS type & version: ? MasOs 10.12.6

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[kisenka]

I need the whole webpack config to be sure that is a loader bug

[unwrittenmike]

Hi there see below: const SpriteLoaderPlugin = require('svg-sprite-loader/plugin') module.exports = { /* Headers of the page / head: { title: 'nissanconfig', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, / Customize the progress-bar color / loading: { color: 'red' }, css: [ '~/assets/fonts/stylesheet.css', { src: '~/assets/main.scss', lang: 'scss' } ], / * Build configuration / build: { plugins: [ new SpriteLoaderPlugin() ], extend(config, ctx) { if (ctx.dev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } config.module.rules.push({ test: /.svg$/, loader: 'svg-sprite-loader' }) } } }

On Thu, 31 Aug 2017 at 13:21 Stas Kurilov notifications@github.com wrote:

I need the whole webpack config to be sure that is a loader bug

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/kisenka/svg-sprite-loader/issues/185#issuecomment-326266496, or mute the thread https://github.com/notifications/unsubscribe-auth/AH3a1zuy7CRotEiFLcClPbDnvKmGipTQks5sdpdUgaJpZM4PH3_J .

[unwrittenmike]

That a nuxt.js config...

[vanoorschot]

@unwrittenmike You can extend the nuxt default webpack in the nuxt.config.js. Nuxt already has it's own webpack config (https://nuxtjs.org/guide/assets/#webpacked) which uses the 'url-loader' for svg files. I don't think this is a bug in svg-sprite-loader, but a conflict with the nuxt webpack configuration.

Right now I have the same problem ;)

[vanoorschot]

@unwrittenmike I created an issue with Nuxt, to ask how this can be achieved. Meanwhile I wrote a hack to get it working.

See my ticket for the implementation: https://github.com/nuxt/nuxt.js/issues/1584

[unwrittenmike]

@vanoorschot Thanks! Your hack works for me! ... sat for a a full day trying to get this working.. total legend!

@kisenka Sorry for pointing the blame at your library...

[jesperlandberg]

Is there a chance someone could show me a full implementation/solution to this? How the config looks and how the icon is imported into the components because I can't seem to get this working. Would be extremely grateful.

[unwrittenmike]

@jesperlandberg I'll post a link to some code for you a bit later today. I have it running smoothly in 2 nuxt.js apps ;)

[jesperlandberg]

@unwrittenmike would be awesome=)

[unwrittenmike]

@jesperlandberg Here you go: https://unwrittenmike@bitbucket.org/unwrittenmike/spriteloadertest.git

[unwrittenmike]

@jesperlandberg Happy to answer any questions you may have...

[jesperlandberg]

@unwrittenmike awesome! Looks like the repo doesnt exist tho?

[unwrittenmike]

@jesperlandberg try this, sorry new to sharing repos... not the hottest git guy haha... https://bitbucket.org/unwrittenmike/spriteloadertest

[jesperlandberg]

@unwrittenmike thanks a lot! However, the icons doesn't seem to show up. Tested on my project and also cloning ur repo and running dev mode.

[krivaten]

@jesperlandberg any chance you could make a gist or something? Both the BitBucket links were busted :(

[ChucKN0risK]

@unwrittenmike The link you provided doesn't work anymore.

@jesperlandberg I agree with @krivaten. I would be glad if you could make a gist 😉

[ChucKN0risK]

@unwrittenmike @jesperlandberg @krivaten I managed to deal with SVG sprite with the following configuration. I hope it will help you 😉

https://gist.github.com/ChucKN0risK/2d0f8466e13d4b63f3982ed2b60bd111

[dword-design]

I actually wrote a Nuxt module that does it. Maybe it's still of interest: https://www.npmjs.com/package/nuxt-svg-sprite-loader