Closed unwrittenmike closed 7 years ago
I need the whole webpack config to be sure that is a loader bug
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 .
That a nuxt.js config...
@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 ;)
@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
@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...
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.
@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 ;)
@unwrittenmike would be awesome=)
@jesperlandberg Here you go: https://unwrittenmike@bitbucket.org/unwrittenmike/spriteloadertest.git
@jesperlandberg Happy to answer any questions you may have...
@unwrittenmike awesome! Looks like the repo doesnt exist tho?
@jesperlandberg try this, sorry new to sharing repos... not the hottest git guy haha... https://bitbucket.org/unwrittenmike/spriteloadertest
@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.
@jesperlandberg any chance you could make a gist or something? Both the BitBucket links were busted :(
@unwrittenmike The link you provided doesn't work anymore.
@jesperlandberg I agree with @krivaten. I would be glad if you could make a gist 😉
@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
I actually wrote a Nuxt module that does it. Maybe it's still of interest: https://www.npmjs.com/package/nuxt-svg-sprite-loader
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:
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)