Skip to content

Consolidate icons #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rich-Harris opened this issue Oct 10, 2024 · 0 comments
Open

Consolidate icons #318

Rich-Harris opened this issue Oct 10, 2024 · 0 comments

Comments

@Rich-Harris
Copy link
Member

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.

@linear linear bot added the svelte.dev label Nov 5, 2024
@linear linear bot closed this as not planned Won't fix, can't repro, duplicate, stale May 6, 2025
@Rich-Harris Rich-Harris reopened this May 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant