docs: flesh out icons section and make standalone page

[benmccann]

I think this fits better as a separate page and is more discoverable. It doesn't really make sense to talk about CSS-based icons on the images page and none of these get optimized.

I had wanted to make this a separate page originally, but didn't have enough content. I added some more to it, so that it looks decent as its own page now. I tested locally to ensure it renders nicely

[changeset-bot]

⚠️ No Changeset found

Latest commit: c26e57c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-kit-13555-svelte.vercel.app/

[jhwz]

When choosing an icon library, 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

Any chance you could touch on what icon libraries we should prefer then? i.e. what is the best strategy for releasing icon libraries in svelte. Just the aforementioned CSS?

[benmccann]

Any chance you could touch on what icon libraries we should prefer then?

I really like the CSS approach. I don't necessarily want to favor one library over another, but if you want an example of one that is easier to compile you can see the approach taken by https://github.com/RobBrazier/svelte-awesome which has only a few .svelte files

[jhwz]

I really like the CSS approach

Interesting, from https://iconify.design/docs/usage/css/:

CSS usually contains all icons, including ones not used on the current page

It seems that this approach generally doesn't support tree shaking etc? So you pay for all the icons if you use just a few? Or you can do something like in RobBrazier/svelte-awesome but man from a quick look through that looks messy 😅

A shame .svelte files are discouraged/don't play nicely with vite. It's definitely the most intuitive approach.

[benmccann]

CSS usually contains all icons, including ones not used on the current page

That's not true. I'm not sure why they've written it. I filed an issue to ask about it: iconify/iconify#367