feat(icons): add icon preview in jsdoc

.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.
+

packages/icons/scripts/build.ts

@@ -30,9 +30,11 @@ type SVGPathInfo = {
   d: string;
 };
 
+// NOTE: In case of any changes, update this file too: `types/@tapsioss/icons.ts`
 type SVGIconInfo = {
   kebabName: string;
   pascalName: string;
+  dataUrl: string;
   paths: SVGPathInfo[];
 };
 
@@ -100,10 +102,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(

packages/icons/templates/entry.txt

@@ -10,6 +10,7 @@ type SVGPathInfo = {
 type SVGIconInfo = {
   kebabName: string;
   pascalName: string;
+  dataUrl: string;
   paths: SVGPathInfo[];
 };
 

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 },

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}}</>;
 

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 },

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();

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[];
 };