docs: add preprocessor guidance

Closes #94

README.md

@@ -40,34 +40,37 @@ bun add carbon-pictograms-svelte
 <Airplane />
 ```
 
-### Direct Import (recommended)
+> [!TIP]
+> Use [optimizeImports](https://github.com/carbon-design-system/carbon-preprocess-svelte#optimizeimports) from [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) to speed up development times.
 
-Import pictograms directly for faster compiling.
+Due to the size of the library, importing directly from the barrel file may result in slower development times, since the entire barrel file is imported.
 
-```js
-import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
-```
+Consider using the [optimizeImports](https://github.com/carbon-design-system/carbon-preprocess-svelte#optimizeimports) preprocessor from [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte).
 
-**Note:** Even if using the base import method, an application bundler like Rollup or webpack should [tree shake](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) unused imports.
+`optimizeImports` is a Svelte preprocessor that optimizes imports from Carbon Svelte libraries. It enables you to use the direct import method without importing the entire library.
 
-#### Import Path Pattern
+For example, the following is automatically re-written by `optimizeImports`:
 
-```js
-import Pictogram from "carbon-pictograms-svelte/lib/<ModuleName>.svelte";
+```diff
+- import { Airplane } from "carbon-pictograms-svelte";
++ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
 ```
 
-Refer to [PICTOGRAM_INDEX.md](PICTOGRAM_INDEX.md) for a list of available pictograms.
+### Direct Import
 
-## API
+An alternative to using the preprocessor is to import pictograms directly.
 
-### Props
+```js
+import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
+```
 
-`$$restProps` are forwarded to the `svg` element.
+**Import Path Pattern**
+
+```js
+import PictogramName from "carbon-pictograms-svelte/lib/<PictogramName>.svelte";
+```
 
-| Name     | Value                             |
-| :------- | :-------------------------------- |
-| tabindex | `string` (default: `undefined`)   |
-| fill     | `string` (default: `currentColor` |
+Refer to [PICTOGRAM_INDEX.md](PICTOGRAM_INDEX.md) for a list of available pictograms.
 
 ## Recipes
 
@@ -95,27 +98,22 @@ Customize the fill color using the `fill` prop or by defining a global class.
 
 ### Labelled
 
-```html
+```svelte
 <Airplane aria-label="Airplane" />
 ```
 
-### Labelled with Focus
-
-```html
-<Airplane aria-label="Airplane" tabindex="0" />
-```
-
 ### Labelled by
 
-```html
+```svelte
 <label id="transportation">Transportation</label>
-
 <Airplane aria-labelledby="transportation" />
 ```
 
-## TypeScript support
+### Focusable
 
-Svelte version 3.31 or greater is required to use this library with TypeScript.
+```svelte
+<Airplane tabindex={0} />
+```
 
 ## [Changelog](CHANGELOG.md)