refactor: migrate GitHubIcon to @kreozalabs/icons and update generation script to handle named exports

Author: munlicode

apps/web/app/components/settings/SystemSettings.tsx

@@ -1,7 +1,7 @@
 // FIXME: Refactor !
 import { useState, useEffect } from "react";
 import { Link } from "react-router";
-import { Button, cn, toast, GitHubIcon } from "@kreozalabs/kei-ui";
+import { Button, cn, toast } from "@kreozalabs/kei-ui";
 import { useP2P } from "@/providers/P2PProvider";
 import { db } from "@/db";
 import type { BenchmarkResult } from "@/db/webDatabaseAdapter";
@@ -18,6 +18,7 @@ import {
   ShieldCheck,
   ShieldAlert,
 } from "lucide-react";
+import { GitHubIcon } from "@kreozalabs/kei-icons";
 
 interface DbStats {
   eventsCount: number;

packages/icons/assets/git-hub-icon.svg

@@ -29,7 +29,7 @@ async function run() {
   const svgFiles = fs.readdirSync(ASSETS_DIR).filter((file) => file.endsWith(".svg"));
   const exports = [];
 
-  const configPath = path.join(__dirname, "icon-config.json");
+  const configPath = path.join(__dirname, "../icon-config.json");
   const iconConfig = fs.existsSync(configPath)
     ? JSON.parse(fs.readFileSync(configPath, "utf-8"))
     : {};
@@ -84,6 +84,13 @@ async function run() {
       }
     }
 
+    // Strip ReactComponent export to avoid namespace clashes when exporting all icons from index.ts
+    jsx = jsx.replace(/export\s+\{\s*\w+\s+as\s+ReactComponent\s*\}\s*;?/g, "");
+
+    // Convert local component declaration to named export if not already exported
+    const componentDeclRegex = new RegExp(`^(\\s*)const\\s+${componentName}\\s*=`, "gm");
+    jsx = jsx.replace(componentDeclRegex, `$1export const ${componentName} =`);
+
     fs.writeFileSync(path.join(OUTPUT_DIR, `${componentName}.tsx`), jsx);
     exports.push(`export * from "./components/${componentName}";`);
   }

packages/icons/scripts/icon-config.json packages/icons/icon-config.jsonpackages/icons/scripts/icon-config.json renamed to packages/icons/icon-config.json

@@ -3,31 +3,4 @@ import type { SVGProps } from "react";
 export interface CalendarIconProps extends SVGProps<SVGSVGElement> {
   day?: number | string;
 }
-export const CalendarIcon = ({ day = 31, ...props }: CalendarIconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    fill="none"
-    viewBox="0 0 192 192"
-    {...props}
-  >
-    <path
-      fill="#ff693c"
-      d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z"
-    />
-    <text
-      x={96}
-      y={112}
-      fill="#fff"
-      fontSize={84}
-      fontWeight={800}
-      fontFamily="system-ui, -apple-system, sans-serif"
-      textAnchor="middle"
-      dominantBaseline="middle"
-    >
-      {day}
-    </text>
-  </svg>
-);
-export { CalendarIcon as ReactComponent };
+export const CalendarIcon = ({ day = 31, ...props }: CalendarIconProps) => <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 192 192" {...props}><path fill="#ff693c" d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z" /><text x={96} y={112} fill="#fff" fontSize={84} fontWeight={800} fontFamily="system-ui, -apple-system, sans-serif" textAnchor="middle" dominantBaseline="middle">{day}</text></svg>;

packages/icons/scripts/generate-components.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+export const GitHubIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 98 96" width="1em" height="1em" {...props}><path fill="currentColor" d="M41.44 69.385C28.807 67.853 19.906 58.762 19.906 46.99c0-4.785 1.723-9.953 4.594-13.398-1.244-3.158-1.053-9.858.383-12.633 3.828-.479 8.996 1.531 12.058 4.307 3.637-1.149 7.465-1.723 12.155-1.723s8.517.574 11.963 1.627c2.966-2.68 8.23-4.69 12.058-4.211 1.34 2.584 1.531 9.283.287 12.537 3.063 3.637 4.69 8.518 4.69 13.494 0 11.772-8.9 20.672-21.725 22.3 3.254 2.104 5.455 6.698 5.455 11.962v9.953c0 2.871 2.393 4.498 5.264 3.35C84.41 87.95 98 70.629 98 49.19 98 22.107 75.988 0 48.904 0S0 22.107 0 49.191c0 21.246 13.494 38.856 31.678 45.46 2.584.956 5.072-.766 5.072-3.35v-7.657c-1.34.575-3.062.958-4.594.958-6.316 0-10.049-3.446-12.728-9.858-1.053-2.584-2.201-4.115-4.403-4.402-1.148-.096-1.53-.574-1.53-1.149 0-1.148 1.913-2.01 3.827-2.01 2.776 0 5.168 1.723 7.657 5.264 1.914 2.776 3.923 4.02 6.316 4.02s3.924-.861 6.125-3.063c1.627-1.627 2.871-3.062 4.02-4.02" /></svg>;

packages/icons/src/components/CalendarIcon.tsx

@@ -1 +1,2 @@
 export * from "./components/CalendarIcon";
+export * from "./components/GitHubIcon";

packages/icons/src/components/GitHubIcon.tsx

@@ -1,4 +1,3 @@
-export * from "./components/GitHubIcon";
 export * from "./components/alert";
 export * from "./components/badge";
 export * from "./components/button";