Use named imports in docs

[theetrain]

Current example:

<script>
  import Accessibility from "carbon-icons-svelte/lib/Accessibility.svelte";
</script>

<Accessibility />

Proposed example:

<script>
  import { Accessibility } from "carbon-icons-svelte";
</script>

<Accessibility />

Since a lot of the time Icons can be autocompleted, using named imports is something users may expect.

[metonym]

I agree that it would be more concise/correct to import from the root; however, I'm worried that users may run into #132 (without using the imports preprocessor or if using a non-Vite set-up).

This might be addressed if the architecture of this library is completely revamped #156

[theetrain]

Agreed, #156 should resolve this. The main issue is with projects using a mix between named imports and deep imports may cause performance issues in dev mode. With the new icon set being thousands of icons, I believe having a single Icon.svelte should help with performance.

I haven't tested this, but in the current state (with vite-plugin-svelte@1.3.0) it's probably most performant to use carbon-icons-svelte with deep imports, and without the optimizeImports preprocessor.

[metonym]

Actually, even in the interim, I'm fine with using named imports in the docs site because that's the happy path. The README should also be updated, which doesn't even mention the preprocessor/Vite set-up.