From 59893119b50fc7135e5206c2d92f31f8c91c3368 Mon Sep 17 00:00:00 2001
From: SHYAKA Davis <87414827+shyakadavis@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:39:42 +0200
Subject: [PATCH] docs: Add Lucide-Svelte icon import instructions and type
 definitions (#1766)

* docs: Add Lucide-Svelte icon import instructions and type definitions

* Add Svelte docs link.

* apply feedback + recommended import manner

* Refactor menuItems type definition

---------

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
---
 docs/guide/packages/lucide-svelte.md | 104 +++++++++++++++++++++++++--
 1 file changed, 99 insertions(+), 5 deletions(-)

diff --git a/docs/guide/packages/lucide-svelte.md b/docs/guide/packages/lucide-svelte.md
index 3ad310e4b..184aa2076 100644
--- a/docs/guide/packages/lucide-svelte.md
+++ b/docs/guide/packages/lucide-svelte.md
@@ -48,14 +48,24 @@ Additional props can be passed to adjust the icon:
 <Camera color="#ff3e98" />
 ```
 
+For faster builds and load times, you can import icons directly from the `lucide-svelte/icons` directory:
+
+```svelte
+<script>
+  import AlertCircle from 'lucide-svelte/icons/alert-circle';
+</script>
+
+<AlertCircle color="#ff3e98" />
+```
+
 ## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
-| `size`                | *number*  | 24           |
-| `color`               | *string*  | currentColor |
-| `strokeWidth`         | *number*  | 2            |
-| `absoluteStrokeWidth` | *boolean* | false        |
+| `size`                | _number_  | 24           |
+| `color`               | _string_  | currentColor |
+| `strokeWidth`         | _number_  | 2            |
+| `absoluteStrokeWidth` | _boolean_ | false        |
 
 ### Applying props
 
@@ -71,6 +81,91 @@ To customize the appearance of an icon, you can pass custom properties as props
 
 This results a filled phone icon.
 
+## Types
+
+The package includes type definitions for all icons. This is useful if you want to dynamically load icons with the `svelte:component` directive whether you are using TypeScript or JSDoc.
+
+### TypeScript Example
+
+```svelte
+<script lang="ts">
+  import Home from 'lucide-svelte/icons/home';
+  import Library from 'lucide-svelte/icons/library';
+  import Cog from 'lucide-svelte/icons/cog';
+  import type { ComponentType } from 'svelte';
+  import type { Icon } from 'lucide-svelte';
+
+  type MenuItem = {
+    name: string;
+    href: string;
+    icon: ComponentType<Icon>;
+  }
+
+  const menuItems: MenuItem[] = [
+    {
+      name: 'Home',
+      href: '/',
+      icon: Home,
+    },
+    {
+      name: 'Blog',
+      href: '/blog',
+      icon: Library,
+    },
+    {
+      name: 'Projects',
+      href: '/projects',
+      icon: Cog,
+    }
+  ];
+</script>
+
+{#each menuItems as item}
+  <a href={item.href}>
+   <svelte:component this={item.icon} />
+    <span>{item.name}</span>
+  </a>
+{/each}
+```
+
+### JSDoc Example
+
+```svelte
+<script>
+  import Home from 'lucide-svelte/icons/home';
+  import Library from 'lucide-svelte/icons/library';
+  import Cog from 'lucide-svelte/icons/cog';
+
+  /**
+   * @typedef {Object} MenuItem
+   * @property {string} name
+   * @property {string} href
+   * @property {import('svelte').ComponentType<import('lucide-svelte').Icon>} icon
+   */
+
+  /** @type {MenuItem[]} */
+  const menuItems = [
+    {
+      name: 'Home',
+      href: '/',
+      icon: Home,
+    },
+    {
+      name: 'Blog',
+      href: '/blog',
+      icon: Library,
+    },
+    {
+      name: 'Projects',
+      href: '/projects',
+      icon: Cog,
+    }
+  ];
+</script>
+```
+
+For more details about typing the `svelte:component` directive, see the [Svelte documentation](https://svelte.dev/docs/typescript#types-componenttype).
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.
@@ -99,4 +194,3 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 
 <LucideIcon name="Menu" />
 ```
-