feat(web,mobile): environment icons can be picked from a shared Lucide list

apps/mobile/package.json

@@ -42,6 +42,7 @@
     "profile:android:hermes": "mkdir -p profiles/review && react-native profile-hermes profiles/review",
     "sync:pierre-icons": "node modules/t3-markdown-text/scripts/sync-pierre-file-icons.mjs",
     "generate": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/generate-uniwind-themes.mts",
+    "generate:lucide-icons": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/generate-environment-lucide-icons.mts",
     "test": "vp test run --config ../../vite.config.ts --dir .",
     "typecheck": "tsc --noEmit"
   },

apps/mobile/scripts/generate-environment-lucide-icons.mts

@@ -0,0 +1,90 @@
+import * as NodeChildProcess from "node:child_process";
+import * as NodeFS from "node:fs";
+import * as NodeModule from "node:module";
+import * as NodePath from "node:path";
+import { ENVIRONMENT_LUCIDE_ICON_IDS } from "@t3tools/contracts";
+import * as Schema from "effect/Schema";
+
+const GENERATED_MODULE_PATH = NodePath.resolve(
+  import.meta.dirname,
+  "../src/components/environmentLucideIcons.generated.ts",
+);
+
+// Path data comes from the same lucide-react build web draws, resolved from
+// the web workspace so both clients stay on one icon version.
+const webRequire = NodeModule.createRequire(
+  NodePath.resolve(import.meta.dirname, "../../web/package.json"),
+);
+const lucideRoot = NodePath.dirname(webRequire.resolve("lucide-react/package.json"));
+const lucideVersion = Schema.decodeUnknownSync(
+  Schema.fromJsonString(Schema.Struct({ version: Schema.String })),
+)(NodeFS.readFileSync(NodePath.join(lucideRoot, "package.json"), "utf8")).version;
+
+const decodeIconNode = Schema.decodeUnknownSync(
+  Schema.fromJsonString(
+    Schema.Array(Schema.Tuple([Schema.String, Schema.Record(Schema.String, Schema.String)])),
+  ),
+);
+
+type IconNode = ReadonlyArray<readonly [string, Readonly<Record<string, string>>]>;
+
+/**
+ * Reads the `__iconNode` array out of one lucide-react icon module. The
+ * module is plain ESM with a single array literal, parsed as JSON after
+ * quoting its keys, so nothing is executed.
+ */
+function readIconNode(id: string): IconNode {
+  const source = NodeFS.readFileSync(
+    NodePath.join(lucideRoot, "dist/esm/icons", `${id}.js`),
+    "utf8",
+  );
+  const literal = /const __iconNode = (\[[\s\S]*?\]);\n/u.exec(source)?.[1];
+  if (literal === undefined) throw new Error(`lucide-react icon ${id} has no __iconNode literal.`);
+  let parsed: ReturnType<typeof decodeIconNode>;
+  try {
+    parsed = decodeIconNode(literal.replaceAll(/(\w+): /gu, '"$1": '));
+  } catch (cause) {
+    throw new Error(`lucide-react icon ${id} has an unexpected node.`, { cause });
+  }
+  // React needs the key only to reconcile a list; mobile builds a static tree.
+  return parsed.map(([element, { key: _key, ...attributes }]) => [element, attributes]);
+}
+
+/**
+ * The module text, passed through the repository formatter so the committed
+ * file matches what the pre-commit hook would write and the freshness test
+ * compares like with like.
+ */
+export function renderEnvironmentLucideIconsModule(): string {
+  const entries = ENVIRONMENT_LUCIDE_ICON_IDS.map(
+    (id) => `  "${id}": ${JSON.stringify(readIconNode(id))},`,
+  );
+  const raw = [
+    "// Generated by scripts/generate-environment-lucide-icons.mts. Do not edit.",
+    `// Source: lucide-react ${lucideVersion}, ids from ENVIRONMENT_LUCIDE_ICON_IDS in contracts.`,
+    'import type { EnvironmentLucideIconId } from "@t3tools/contracts";',
+    "",
+    "export type LucideIconNode = ReadonlyArray<",
+    "  readonly [element: string, attributes: Readonly<Record<string, string>>]",
+    ">;",
+    "",
+    "export const ENVIRONMENT_LUCIDE_ICON_NODES: Record<EnvironmentLucideIconId, LucideIconNode> = {",
+    ...entries,
+    "};",
+    "",
+  ].join("\n");
+  // The `vp` bin is a shell shim, so it runs through the shell, not node.
+  const formatted = NodeChildProcess.spawnSync(
+    NodePath.resolve(import.meta.dirname, "../../../node_modules/.bin/vp"),
+    ["fmt", `--stdin-filepath=${GENERATED_MODULE_PATH}`],
+    { input: raw, encoding: "utf8", maxBuffer: 16 * 1024 * 1024 },
+  );
+  if (formatted.status !== 0) {
+    throw new Error(`vp fmt failed while formatting the generated module: ${formatted.stderr}`);
+  }
+  return formatted.stdout;
+}
+
+if (import.meta.main) {
+  NodeFS.writeFileSync(GENERATED_MODULE_PATH, renderEnvironmentLucideIconsModule());
+}

apps/mobile/scripts/generate-environment-lucide-icons.test.ts

@@ -0,0 +1,18 @@
+import * as NodeFS from "node:fs";
+import * as NodePath from "node:path";
+import { describe, expect, it } from "vite-plus/test";
+
+import { renderEnvironmentLucideIconsModule } from "./generate-environment-lucide-icons.mts";
+
+describe("generate environment Lucide icons", () => {
+  it("keeps the committed module current", () => {
+    const generated = NodePath.resolve(
+      import.meta.dirname,
+      "../src/components/environmentLucideIcons.generated.ts",
+    );
+    expect(
+      NodeFS.existsSync(generated) ? NodeFS.readFileSync(generated, "utf8") : null,
+      "Run `vp run --filter @t3tools/mobile generate:lucide-icons` and commit the output.",
+    ).toBe(renderEnvironmentLucideIconsModule());
+  });
+});

apps/mobile/src/components/EnvironmentLucideIcon.tsx

@@ -0,0 +1,96 @@
+import type { EnvironmentLucideIconId } from "@t3tools/contracts";
+import { memo } from "react";
+import Svg, { Circle, Ellipse, Line, Path, Polygon, Polyline, Rect } from "react-native-svg";
+import { withUniwind } from "uniwind";
+
+import {
+  ENVIRONMENT_LUCIDE_ICON_NODES,
+  type LucideIconNode,
+} from "./environmentLucideIcons.generated";
+
+const ThemedSvg = withUniwind(Svg);
+
+/**
+ * Draws one of the shared Lucide icons from generated path data, on the same
+ * 24 unit grid and 2 unit stroke web uses. Only the element kinds Lucide
+ * ships are handled, and the generator emits only those kinds.
+ */
+function renderNode(node: LucideIconNode) {
+  // The node lists are static, so position is a stable key.
+  return node.map(([element, attributes], key) => {
+    // A handful of icons fill a dot with currentColor; everything else strokes.
+    const fill = attributes.fill === "currentColor" ? "currentColor" : "none";
+    switch (element) {
+      case "path":
+        return <Path key={key} d={attributes.d} fill={fill} />;
+      case "circle":
+        return (
+          <Circle key={key} cx={attributes.cx} cy={attributes.cy} r={attributes.r} fill={fill} />
+        );
+      case "rect":
+        return (
+          <Rect
+            key={key}
+            x={attributes.x}
+            y={attributes.y}
+            width={attributes.width}
+            height={attributes.height}
+            rx={attributes.rx}
+            ry={attributes.ry}
+            fill={fill}
+          />
+        );
+      case "line":
+        return (
+          <Line
+            key={key}
+            x1={attributes.x1}
+            y1={attributes.y1}
+            x2={attributes.x2}
+            y2={attributes.y2}
+          />
+        );
+      case "polyline":
+        return <Polyline key={key} points={attributes.points} fill={fill} />;
+      case "polygon":
+        return <Polygon key={key} points={attributes.points} fill={fill} />;
+      case "ellipse":
+        return (
+          <Ellipse
+            key={key}
+            cx={attributes.cx}
+            cy={attributes.cy}
+            rx={attributes.rx}
+            ry={attributes.ry}
+            fill={fill}
+          />
+        );
+      default:
+        return null;
+    }
+  });
+}
+
+export const EnvironmentLucideIcon = memo(function EnvironmentLucideIcon(props: {
+  readonly id: EnvironmentLucideIconId;
+  readonly size: number;
+  readonly colorClassName: string;
+  readonly accessibilityLabel?: string;
+}) {
+  return (
+    <ThemedSvg
+      accessibilityLabel={props.accessibilityLabel}
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      colorClassName={props.colorClassName}
+    >
+      {renderNode(ENVIRONMENT_LUCIDE_ICON_NODES[props.id])}
+    </ThemedSvg>
+  );
+});

apps/mobile/src/components/EnvironmentMachineSymbol.tsx

@@ -1,12 +1,14 @@
 import {
   ENVIRONMENT_ICON_LABELS,
   isEnvironmentCuratedIconId,
+  isEnvironmentLucideIconId,
   type EnvironmentCuratedIconId,
   type EnvironmentIcon,
 } from "@t3tools/contracts";
 
 import { projectIconColorClassNames } from "../lib/projectIcon";
 import { SymbolView, type AppSymbolName } from "./AppSymbol";
+import { EnvironmentLucideIcon } from "./EnvironmentLucideIcon";
 import { ProjectIconGlyphView } from "./ProjectFavicon";
 
 // Every SF name here is already a key of the Android fallback map, so a new
@@ -71,17 +73,33 @@ export function EnvironmentMachineSymbol(props: {
       />
     );
   }
+  const tintColorClassName =
+    icon.kind === "icon" && icon.color !== undefined
+      ? projectIconColorClassNames(icon.color).tint
+      : props.tintColorClassName;
+  // Curated first, then the shared Lucide list; the generated module holds
+  // path data for exactly those ids, so anything else is the generic server.
+  if (
+    icon.kind === "icon" &&
+    !isEnvironmentCuratedIconId(icon.name) &&
+    isEnvironmentLucideIconId(icon.name)
+  ) {
+    return (
+      <EnvironmentLucideIcon
+        id={icon.name}
+        size={size}
+        colorClassName={tintColorClassName}
+        accessibilityLabel={icon.name.replaceAll("-", " ")}
+      />
+    );
+  }
   const id = symbolId(icon);
   return (
     <SymbolView
       accessibilityLabel={ENVIRONMENT_ICON_LABELS[id]}
       name={SYMBOL_BY_ID[id]}
       size={size}
-      tintColorClassName={
-        icon.kind === "icon" && icon.color !== undefined
-          ? projectIconColorClassNames(icon.color).tint
-          : props.tintColorClassName
-      }
+      tintColorClassName={tintColorClassName}
       type="monochrome"
     />
   );