From 261002fe809037f412fe5bdf35d08a8ca56df4ca Mon Sep 17 00:00:00 2001
From: Yousuf Jawwad <yousuf@maher.pk>
Date: Tue, 7 May 2024 22:33:18 +0500
Subject: [PATCH] chore(): added type definitions

---
 README.md                      | 39 ++++++++++++++++++++++++++++++++++
 scripts/generate-components.js | 10 +++++++--
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 583827a..7f90fd4 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,45 @@ All icons are imported from a single file, where [ICON SLUG] is replaced by a ca
   </style>
 ```
 
+## Type Definition for Dynamic Icons in Svelte Components
+
+Sometimes, we want to provide the component dynamically to a component. We can do that by using `svelte:component` feature with the
+helper type `SiComponentType` type definition.
+
+```svelte
+<script lang="ts">
+  import type { SiComponentType } from '@icons-pack/svelte-simple-icons';
+
+  export let icon: SiComponentType;
+  export let text: string;
+  export let click: () => void = () => console.log('do something');
+</script>
+
+<button on:click={click}>
+  <svelte:component
+    this={icon}
+    title={text} <!-- optional, along with size and color properties --> 
+  />
+  {text}
+</button>
+
+<style lang="scss">
+  button {
+    display: flex;
+    flex-direction: row;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: border-color 0.25s;
+    box-shadow: none;
+    text-shadow: none;
+  }
+
+  .icon {
+    margin: 4px 4px 0 0;
+  }
+</style>
+```
+
 ## Faster Compilations
 
 If you only need a few icons, you can import them individually instead of the entire file to improve compilation.
diff --git a/scripts/generate-components.js b/scripts/generate-components.js
index befcdff..629d6ba 100644
--- a/scripts/generate-components.js
+++ b/scripts/generate-components.js
@@ -38,6 +38,14 @@ const attrsToString = (attrs) => {
     .join(" ");
 };
 
+const exportType = `
+import type { ComponentType, SvelteComponent } from 'svelte';
+
+export type SiComponentType = ComponentType<SvelteComponent<{ color?: string; size?: string; title?: string; }>>;
+
+`
+fs.appendFileSync(pathIndexExport, exportType, formatFile);
+
 ICONS.forEach((icon) => {
   const baseName = String(icon);
   const componentName = upperCamelCase(baseName);
@@ -73,8 +81,6 @@ ICONS.forEach((icon) => {
 
   fs.writeFileSync(locationOutputComponent, component, formatFile);
 
-  console.log(`${componentName}`);
-
   const exportComponent = `export { default as ${componentName} } from './icons/${componentName}.svelte';\r\n`;
 
   fs.appendFileSync(pathIndexExport, exportComponent, formatFile);