You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
At the moment there are two different approaches to icons in use:
importing .svg files is great because you can use them in CSS rules, and it's very easy to do things like rotating chevrons. but you lose the ability to use currentColor (meaning stuff has to be duplicated for dark/light mode), and we have icons duplicated between apps/svelte.dev and the two packages
<Icons> lets us use currentColor, but I don't love the mechanism — every page load embeds every icon, and a bunch of them probably aren't used. We can't just keep adding junk to it over time, it's not sustainable. And it increases DOM size — we need an <svg> and a <use> for every icon, instead of just a background image
For the icons themselves, some are from the Figma document, but since it doesn't have everything we need I've started bringing stuff in from Lucide. We could consider using lucide-svelte instead of our own Icons.svelte, but I haven't looked into what the overhead is.
Anyway it'd be nice to settle on a single consistent approach if we can.
The text was updated successfully, but these errors were encountered:
At the moment there are two different approaches to icons in use:
.svg
files is great because you can use them in CSS rules, and it's very easy to do things like rotating chevrons. but you lose the ability to usecurrentColor
(meaning stuff has to be duplicated for dark/light mode), and we have icons duplicated betweenapps/svelte.dev
and the twopackages
<Icons>
lets us usecurrentColor
, but I don't love the mechanism — every page load embeds every icon, and a bunch of them probably aren't used. We can't just keep adding junk to it over time, it's not sustainable. And it increases DOM size — we need an<svg>
and a<use>
for every icon, instead of just a background imageFor the icons themselves, some are from the Figma document, but since it doesn't have everything we need I've started bringing stuff in from Lucide. We could consider using
lucide-svelte
instead of our ownIcons.svelte
, but I haven't looked into what the overhead is.Anyway it'd be nice to settle on a single consistent approach if we can.
The text was updated successfully, but these errors were encountered: