Icons library suggestion

[karchung0930]

Hi, based on https://svelte.dev/docs/kit/icons

it doesn’t require each icon to be imported into your .svelte file.

Isn't this a benefit though? Because we only import the ones that we need. Unless it means slow down the development process as developer need to manually write one import for each icons, but this is actually the same whenever importing other components as long as using Svelte because it doesn't have the auto import feature like Nuxt.

I'm not sure how

A great way to use icons is to define them purely via CSS

can have great performance because it's just like importing a CSS file which includes so many unused rules and imagine if only using multiple of them.

I agree

it is recommended to avoid those that provide a .svelte file per icon as these libraries can have thousands of .svelte files which really slow down Vite’s dependency optimization

but we do not know which library did that since they won't explain it. And I really have no idea what library to use after seeing this article.
Can you suggest one?

Do lucide.dev good?

Each icon can be imported as a Svelte component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

Although I'm not sure if it also have thousands of .svelte file

[david-plugge]

Nowadays I'm always opting for https://github.com/unplugin/unplugin-icons. It does not have the issue of taking ages to precompute components, as they are lazily generated and therefore also only include the icons that are used. And the ecosystem is gigantic as well, my go to icons are the lucide ones.