From 90685133ef297f066c10d96b12488579bfe15d55 Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Tue, 1 Jul 2025 13:07:05 +0330
Subject: [PATCH 1/2] feat: add icon preview in jsdocs

---
 .changeset/stale-lines-hug.md                 |  8 ++++++++
 packages/icons/scripts/build.ts               |  8 ++++++++
 packages/icons/templates/entry.txt            |  1 +
 packages/react-icons/scripts/build.ts         |  1 +
 packages/react-icons/templates/react-icon.txt | 11 +++++++++++
 packages/web-icons/scripts/build.ts           |  1 +
 packages/web-icons/templates/web-icon.txt     | 11 +++++++++++
 7 files changed, 41 insertions(+)
 create mode 100644 .changeset/stale-lines-hug.md

diff --git a/.changeset/stale-lines-hug.md b/.changeset/stale-lines-hug.md
new file mode 100644
index 00000000..3cffd8db
--- /dev/null
+++ b/.changeset/stale-lines-hug.md
@@ -0,0 +1,8 @@
+---
+"@tapsioss/react-icons": patch
+"@tapsioss/web-icons": patch
+"@tapsioss/icons": patch
+---
+
+Add preview of icons in JSDocs.
+  
\ No newline at end of file
diff --git a/packages/icons/scripts/build.ts b/packages/icons/scripts/build.ts
index 9395961d..ca1c85fa 100644
--- a/packages/icons/scripts/build.ts
+++ b/packages/icons/scripts/build.ts
@@ -33,6 +33,7 @@ type SVGPathInfo = {
 type SVGIconInfo = {
   kebabName: string;
   pascalName: string;
+  dataUrl: string;
   paths: SVGPathInfo[];
 };
 
@@ -100,10 +101,17 @@ const generatePaths = async () => {
     const name = toPascalCase(pathInfo.name, "-");
     const shouldAttachComma = i !== 0;
 
+    const base64 = Buffer.from(
+      data.replace("<svg", '<svg style="background: #ffffff;"'),
+    ).toString("base64");
+
+    const dataUrl = `data:image/svg+xml;base64,${base64}`;
+
     const iconInfo: SVGIconInfo = {
       pascalName: name,
       kebabName: pathInfo.name,
       paths: pathsInfo,
+      dataUrl,
     };
 
     await fs.appendFile(
diff --git a/packages/icons/templates/entry.txt b/packages/icons/templates/entry.txt
index 83a1823a..ffdc34ca 100644
--- a/packages/icons/templates/entry.txt
+++ b/packages/icons/templates/entry.txt
@@ -10,6 +10,7 @@ type SVGPathInfo = {
 type SVGIconInfo = {
   kebabName: string;
   pascalName: string;
+  dataUrl: string;
   paths: SVGPathInfo[];
 };
 
diff --git a/packages/react-icons/scripts/build.ts b/packages/react-icons/scripts/build.ts
index d52ac592..9d0719f6 100644
--- a/packages/react-icons/scripts/build.ts
+++ b/packages/react-icons/scripts/build.ts
@@ -47,6 +47,7 @@ const generateComponents = async () => {
       {
         name: iconInfo.pascalName,
         paths: paths.join(""),
+        dataUrl: iconInfo.dataUrl,
       },
       {},
       { escape: v => v as string },
diff --git a/packages/react-icons/templates/react-icon.txt b/packages/react-icons/templates/react-icon.txt
index e64c6330..70fc6b72 100644
--- a/packages/react-icons/templates/react-icon.txt
+++ b/packages/react-icons/templates/react-icon.txt
@@ -1,5 +1,16 @@
 import BaseIcon, { type Props } from "./base-icon.ts";
 
+/**
+* "{{name}}" Icon Component
+*
+* ---
+*
+* Preview:
+*
+* ![icon preview]({{dataUrl}})
+*
+* @see https://tap30.github.io/web-components/icons
+*/
 const {{name}} = (props: Omit<Props, "children">) => {
   const paths = <>{{paths}}</>;
 
diff --git a/packages/web-icons/scripts/build.ts b/packages/web-icons/scripts/build.ts
index 98f05c56..8f40ee6e 100644
--- a/packages/web-icons/scripts/build.ts
+++ b/packages/web-icons/scripts/build.ts
@@ -60,6 +60,7 @@ const generateComponents = async () => {
         name: iconInfo.pascalName,
         paths: paths.join(""),
         elementTag: iconInfo.kebabName,
+        dataUrl: iconInfo.dataUrl,
       },
       {},
       { escape: v => v as string },
diff --git a/packages/web-icons/templates/web-icon.txt b/packages/web-icons/templates/web-icon.txt
index 5f48372e..978ddad1 100644
--- a/packages/web-icons/templates/web-icon.txt
+++ b/packages/web-icons/templates/web-icon.txt
@@ -1,5 +1,16 @@
 import BaseIcon from "../base-icon.ts";
 
+/**
+* "{{name}}" Icon Component
+*
+* ---
+*
+* Preview:
+*
+* ![icon preview]({{dataUrl}})
+*
+* @see https://tap30.github.io/web-components/icons
+*/
 export class {{name}} extends BaseIcon {
   constructor() {
     super();

From 25dfd7ea059e19877e082b0ecdcaee7051fd1373 Mon Sep 17 00:00:00 2001
From: Amirhossein Alibakhshi <amir78729@gmail.com>
Date: Tue, 1 Jul 2025 14:39:22 +0330
Subject: [PATCH 2/2] fix: update types to resolve build issues

---
 packages/icons/scripts/build.ts | 1 +
 types/@tapsioss/icons.ts        | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/icons/scripts/build.ts b/packages/icons/scripts/build.ts
index ca1c85fa..77d0a6be 100644
--- a/packages/icons/scripts/build.ts
+++ b/packages/icons/scripts/build.ts
@@ -30,6 +30,7 @@ type SVGPathInfo = {
   d: string;
 };
 
+// NOTE: In case of any changes, update this file too: `types/@tapsioss/icons.ts`
 type SVGIconInfo = {
   kebabName: string;
   pascalName: string;
diff --git a/types/@tapsioss/icons.ts b/types/@tapsioss/icons.ts
index 37f68b0f..852c4c79 100644
--- a/types/@tapsioss/icons.ts
+++ b/types/@tapsioss/icons.ts
@@ -5,9 +5,11 @@ type SVGPathInfo = {
   d: string;
 };
 
+// NOTE: In case of any changes, update this file too: `packages/icons/scripts/build.ts`
 type SVGIconInfo = {
   kebabName: string;
   pascalName: string;
+  dataUrl: string;
   paths: SVGPathInfo[];
 };