iconfu/svg-inject

Question about webpack

mesqueeb opened this issue · 1 comments

I'm a VueJS developer, and most of us use webpack to bundle their apps. (usually via default config of a CLI framework like vue-cli etc.)

When it comes to inlining svg's, the go-to library is usually:
https://github.com/oliverfindl/vue-svg-inline-loader

This is a simple "webpack extension" that swaps out <img> for the actual <svg> upon build.

I wonder what the difference is between this library and a webpack loader like I mentioned above.
If there are benefits for this library over a webpack loader, I might consider swapping out the webpack loader for this library!

This might be an interesting Q&A to add to the Readme! ;)

Pro Dynamic SVG Loading (SVGInject)

(1) Universality
Same usage in every framework / no framework

(2) Smaller bundle size
The SVGs are not part of the bundle and load on demand

(3) Prevention of Id conflicts
IDs in the SVG are made unique before injection to prevent ID conflicts in the DOM. It's not possible by design to do this within a bundle build (see #19)

Pro Webpack Extension

(1) SVG Display Time when first shown
The SVGs do not need to load when displayed first

(2) Fewer network connections
Before cached each SVG needs to load separately when displayed in the Dynamic SVG Loading approach

This might be not complete...

In my opinion the README would get a bit bloated but the result of this Issue might go into the Wiki