LedzZm
commented
4 years ago Well some time has passed and no answer has been given and since the svg displays normally when you reference it, i will be closing this and if someone has any input, just reopen. Thanks.
Hi everyone. This post is more of a question than an issue. I am new to webpack so I am probably missing something trivial, but please bear with me.
So to give you some context. I am working on a Laravel project and i would like to experiment with svg sprites, to investigate the performance improvement (if any), on the load times and or total size of resources that need to be downloaded.
So my setup is the following: -Node.js: v9.10.1 -Vue.js: 2.5.17 -svg-sprite-loader: "5.0.0
I appended the configuration using the laravel mix, because i am not yet comfortable enough with webpack itself and maybe that is where I goofed, so i will furthermore supply my webpack.mix.js file.
https://pastebin.com/7uDraWZT
Furthermore in my app.js (main js file) I require the files I want merged, like so:
const svgFiles = require.context('../images/', true, /.*\.svg$/i) svgFiles.keys().forEach(file => file)My "source" files are located in: ├── resources │ ├── images │ │ └── koromposFolder │ │ ├── B.svg │ │ └── W.svg
And after compilation i end up with: ├── public │ ├── images │ │ ├── B.svg │ │ └── sprites │ │ └── icons-sprite.svg
Which i guess is to be expected, so all well so far (I guess).
Now if i open the generated sprite in the browser i only see a blank page. The svg with the symbols is there with the respective fills but it just does not display.
This is the generated svg https://pastebin.com/pfD44jVH (maybe all works fine and i am missing something).
As a side note, and with that i will be closing the description, i tried the same thing with the files you provide in your examples, just to ensure that the problem is not caused by weird/incorrect formatting of my source SVG files.
Edit: If i try to just import in a vue component like so import W from '../../../public/images/W.svg' The watch enters an endless loop... I guess I really got something wrong.
Lastly i would greatly appreciate any input / articles / blogposts / or whatever, concerning the pros and cons of sprites vs separate SVG files vs inlining the svgs. In my search so far everything seems really vague and the most common replay is "Measure for yourself", which is acceptable enough as an answer, but i would also appreciate some more theoretical context.
Thank you for your time, Best Regards