Interesting pattern i just come up with to have a collection of svgs in svelte 🧡 svelte.dev/playground/f... - ThreadSky

paolo.ricciuti.me • 50 days ago

Interesting pattern i just come up with to have a collection of svgs in svelte 🧡

https://svelte.dev/playground/fe0f940a0d4a4dd4990495101d829428?version=5.28.2

Comments

jvp.design•50 days ago

ooh, that's funky. i would have never thought to do it this way

thiagolino8.bsky.social•50 days ago

What I usually do is use import.meta.glob + '?raw' query + {@html}
This way each svg is in its own file and there is no need to add a new export every time
I believe hydration is also simpler using {@html} (not sure)

thiagolino8.bsky.social•50 days ago

And if you remove the eager parameter you can use dynamic imports to avoid importing all the svgs when you only want one

thiagolino8.bsky.social•50 days ago

Oops, the css was wrong

thiagolino8.bsky.social•50 days ago

Final version, you can choose between inline svg and img

thiagolino8.bsky.social•50 days ago

paolo.ricciuti.me•50 days ago

This will not ssr tho...but the `import.meta.glob` it's nice if you do it eagerly (if you work in `vite` but tbf who's doing svelte without vite nowadays?).

However the snippet version will work even without vite and it will technically also treeshake away every unused icon. I think you can also

paolo.ricciuti.me•50 days ago

infer the type. Also if you want to improve hydration you can use `@html` anyway even tho it's less nice. However i don't think the impact on hydration is huge in this case since it's pretty much static.

maxiim3.bsky.social•50 days ago

Cool, but aren't you importing all SVG's everytime you use one ?

paolo.ricciuti.me•50 days ago

With import * as logos rollup is able to treeshake the unused ones.

maxiim3.bsky.social•49 days ago

Okay, but only at build time I guess

paolo.ricciuti.me•49 days ago

Well yeah but tree shake is always at build time. And obviously in this case I'm also accessing the module with a string so it's not really the case for this example lol

daviddalbusco.com•49 days ago

Are the snippets chunked? If not, wouldn’t it be better to split each SVG into a separate dedicated module or component? Otherwise, all SVG get loaded at once as soon as one is requested, even if they're unused?

Comments

Posting Rules

Reply