Load SVG in Svelte

[kresnasatya]

Hi everyone, I would like to share my personal code sample how to load SVG in Svelte (e.g. you load icons and usually use them beside the menu). The personal code store in GitHub repo: senkustream/svg-in-svelte. No, any third party plugin by the way.

If you like the summary you can visit to this site: https://learn.kresna.me/programming/svelte.

Good luck and have fun!

[david-plugge]

Hi, thanks for sharing!

What is wrong with simply changing the Extension from .svg to .svelte? That also enables you to set any attribute on the svg element avoiding the need for a wrapping div aswell as all the css variables.

Additionally, you do not get treeshaking in your solution.

[kresnasatya]

Hi, thanks for reply. Actually, the way you mention is correct too. I just try a different approach.

[kresnasatya]

Hi, I follow up again. You're right, the more benefits we can get if we convert each SVG icon into Svelte component like control width, height, fill, stroke, and stroke width of SVG and we can skip div tag as a wrapper. I update the code program and keep the old one as the part of ways to load SVG in Svelte. Thank you very much.