svg-sprite icon indicating copy to clipboard operation
svg-sprite copied to clipboard

Published 20 hours ago • verified publisher icon nuxt-modules

Inline the SVG and prevent load from sprite

Open mendicm opened this issue 5 years ago • 6 comments

Sometimes we need to inline the svg to prevent blinking and increase the lighthouse scoring when the svg is visible at render time. Is there any option to take the svg from the generated sprite and inline it instead of including it using the <svg><use xlink:href="#id"></use></svg> method? It would be fantastic to have a <svg-icon name="icon-name" inline="true" /> option or similar. A workaround is to use the url-loader plugin but it would be greatter to use the svgo optimized version from the generated sprite. Any ideas?

Thank you!

mendicm avatar Dec 23 '19 21:12 mendicm

Sorry for the late response. For now, there are no options to do this in the module. But we can discuss this possibility in future versions

farnabaz avatar Jan 05 '20 18:01 farnabaz

Nice, I think this feature is very interesting when you want to optimize the first meaningful paint and prevent blinks when the browser loads the svg sprite, also when loaded from cache.

mendicm avatar Feb 04 '20 12:02 mendicm

It would be nice to provide possibility to inline some icons by default. It can be useful for workaround Chromium bug, see #4 and #92

Koc avatar May 18 '20 18:05 Koc

Maybe this helps someone. https://gist.github.com/internetztube/42a1410aa9f3d042d0521e8d69480cc9

internetztube avatar Jun 18 '20 12:06 internetztube

Definitely a much needed feature IMO. For target: static this provides a significant bump in lighthouse score.

leviwheatcroft avatar Aug 20 '21 20:08 leviwheatcroft

Need so much please

Detzler avatar Dec 19 '21 10:12 Detzler