Add previews for icons in JSDoc in @keystar/ui (#1412)

Author: emmatown

.changeset/unlucky-goats-pull.md

@@ -0,0 +1,5 @@
+---
+'@keystar/ui': patch
+---
+
+Add JSDoc previews for icons

design-system/pkg/build-icons.ts

@@ -1,4 +1,5 @@
 import { transform } from '@svgr/core';
+import { optimize } from 'svgo';
 import _rawIcons from 'lucide-static';
 import fs from 'fs/promises';
 import path from 'path';
@@ -34,14 +35,25 @@ async function writeIcons() {
   await Promise.all(
     icons.map(async icon => {
       const name = icon.name[0].toLowerCase() + icon.name.slice(1);
-      let code = await transform(
-        icon.data,
-        {
-          icon: true,
-          typescript: true,
-          expandProps: false,
-          template: function (variables, context) {
-            return context.tpl`
+      const optimized = optimize(icon.data, {
+        plugins: [
+          { name: 'preset-default' },
+          {
+            name: 'removeAttrs',
+            params: { attrs: ['class'] },
+          },
+        ],
+      }).data;
+      let code = (
+        await transform(
+          optimized,
+          {
+            icon: true,
+            typescript: true,
+            expandProps: false,
+            template: function (variables, context) {
+              return context.tpl`
+            /** LOCATION_FOR_REPLACEMENT */
             export const ${name} = ${
               variables.jsx.children.length === 1
                 ? variables.jsx.children[0]
@@ -57,14 +69,22 @@ async function writeIcons() {
                   }
             }
             `;
+            },
+            plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
           },
-          plugins: [
-            '@svgr/plugin-svgo',
-            '@svgr/plugin-jsx',
-            '@svgr/plugin-prettier',
-          ],
-        },
-        { componentName: name }
+          { componentName: name }
+        )
+      ).replace(
+        'LOCATION_FOR_REPLACEMENT',
+        `![${name}](data:image/svg+xml;base64,${Buffer.from(
+          optimized
+            .replace(
+              /<svg[^>]+>/,
+              '$&<rect fill="#fff" stroke="#fff" width="24" height="24"/>'
+            )
+            .replace(/currentColor/g, '#000'),
+          'utf8'
+        ).toString('base64')})`
       );
       await fs.writeFile(path.join(iconOutDir, `${name}.tsx`), code);
     })

design-system/pkg/package.json

@@ -2,8 +2,6 @@
   "name": "@keystar/ui",
   "version": "0.7.17",
   "license": "MIT AND Apache-2.0",
-  "main": "",
-  "module": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/Thinkmill/keystatic/",
@@ -1573,7 +1571,6 @@
     "@svgr/core": "^6.5.1",
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-prettier": "^6.5.1",
-    "@svgr/plugin-svgo": "^6.5.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -1583,6 +1580,7 @@
     "next": "^15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "svgo": "^3.3.2",
     "tsx": "^4.8.2"
   },
   "peerDependencies": {

design-system/pkg/src/icon/icons/aArrowDownIcon.tsx

@@ -1,3 +1,4 @@
+/** ![aArrowDownIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBkPSJNMy41IDEzaDZNMiAxNmw0LjUtOSA0LjUgOU0xOCA3djlNMTQgMTJsNCA0IDQtNCIvPjwvc3ZnPg==) */
 export const aArrowDownIcon = (
   <path d="M3.5 13h6M2 16l4.5-9 4.5 9M18 7v9M14 12l4 4 4-4" />
 );

design-system/pkg/src/icon/icons/aArrowUpIcon.tsx

@@ -1,3 +1,4 @@
+/** ![aArrowUpIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBkPSJNMy41IDEzaDZNMiAxNmw0LjUtOSA0LjUgOU0xOCAxNlY3TTE0IDExbDQtNCA0IDQiLz48L3N2Zz4=) */
 export const aArrowUpIcon = (
   <path d="M3.5 13h6M2 16l4.5-9 4.5 9M18 16V7M14 11l4-4 4 4" />
 );

design-system/pkg/src/icon/icons/aLargeSmallIcon.tsx

@@ -1,3 +1,4 @@
+/** ![aLargeSmallIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBkPSJNMjEgMTRoLTVNMTYgMTZ2LTMuNWEyLjUgMi41IDAgMCAxIDUgMFYxNk00LjUgMTNoNk0zIDE2bDQuNS05IDQuNSA5Ii8+PC9zdmc+) */
 export const aLargeSmallIcon = (
   <path d="M21 14h-5M16 16v-3.5a2.5 2.5 0 0 1 5 0V16M4.5 13h6M3 16l4.5-9 4.5 9" />
 );

design-system/pkg/src/icon/icons/accessibilityIcon.tsx

@@ -1,3 +1,4 @@
+/** ![accessibilityIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjQiIHI9IjEiLz48cGF0aCBkPSJtMTggMTkgMS03LTYgMU01IDhsMy0zIDUuNSAzLTIuMzYgMy41TTQuMjQgMTQuNWE1IDUgMCAwIDAgNi44OCA2Ii8+PHBhdGggZD0iTTEzLjc2IDE3LjVhNSA1IDAgMCAwLTYuODgtNiIvPjwvc3ZnPg==) */
 export const accessibilityIcon = (
   <>
     <circle cx={16} cy={4} r={1} />

design-system/pkg/src/icon/icons/activityIcon.tsx

@@ -1 +1,2 @@
+/** ![activityIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBkPSJNMjIgMTJoLTRsLTMgOUw5IDNsLTMgOUgyIi8+PC9zdmc+) */
 export const activityIcon = <path d="M22 12h-4l-3 9L9 3l-3 9H2" />;

design-system/pkg/src/icon/icons/activitySquareIcon.tsx

@@ -1,3 +1,4 @@
+/** ![activitySquareIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIi8+PHBhdGggZD0iTTE3IDEyaC0ybC0yIDUtMi0xMC0yIDVINyIvPjwvc3ZnPg==) */
 export const activitySquareIcon = (
   <>
     <rect width={18} height={18} x={3} y={3} rx={2} />

design-system/pkg/src/icon/icons/airVentIcon.tsx

@@ -1,3 +1,4 @@
+/** ![airVentIcon](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3QgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBkPSJNNiAxMkg0YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDE2YTIgMiAwIDAgMSAyIDJ2NWEyIDIgMCAwIDEtMiAyaC0yTTYgOGgxMk0xOC4zIDE3LjdhMi41IDIuNSAwIDAgMS0zLjE2IDMuODMgMi41MyAyLjUzIDAgMCAxLTEuMTQtMlYxMk02LjYgMTUuNkEyIDIgMCAxIDAgMTAgMTd2LTUiLz48L3N2Zz4=) */
 export const airVentIcon = (
   <path d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 8h12M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12M6.6 15.6A2 2 0 1 0 10 17v-5" />
 );