From 405ee22ca0cf25b74dd22f6b9779d2cb7d6e16f5 Mon Sep 17 00:00:00 2001
From: Bennett Schwartz <gc@gustycube.xyz>
Date: Thu, 30 Apr 2026 23:26:09 -0400
Subject: [PATCH] fix(docs): render card icons

---
 package-lock.json          | 10 ++++++
 package.json               |  1 +
 src/css/custom.css         |  4 ++-
 src/theme/MDXComponents.js | 69 +++++++++++++++++++++++++++++++++++++-
 4 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 27849d7..59507de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@docusaurus/preset-classic": "3.9.2",
         "@mdx-js/react": "3.1.1",
         "clsx": "2.1.1",
+        "lucide-react": "^1.14.0",
         "prism-react-renderer": "2.4.1",
         "react": "18.3.1",
         "react-dom": "18.3.1"
@@ -12928,6 +12929,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.14.0.tgz",
+      "integrity": "sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
diff --git a/package.json b/package.json
index a5fc82c..844a905 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@docusaurus/preset-classic": "3.9.2",
     "@mdx-js/react": "3.1.1",
     "clsx": "2.1.1",
+    "lucide-react": "^1.14.0",
     "prism-react-renderer": "2.4.1",
     "react": "18.3.1",
     "react-dom": "18.3.1"
diff --git a/src/css/custom.css b/src/css/custom.css
index d5ea631..82c0711 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -182,8 +182,10 @@
 }
 
 .membrane-card__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
   color: var(--ifm-color-primary);
-  font-size: 1.1rem;
+  line-height: 1;
 }
 
 @media (max-width: 720px) {
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index de2d9e4..de4b79d 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -3,6 +3,55 @@ import Link from "@docusaurus/Link";
 import OriginalMDXComponents from "@theme-original/MDXComponents";
 import DocusaurusTabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import {
+  ArrowDownToLine,
+  Bolt,
+  BookOpen,
+  Brain,
+  ChartBar,
+  ChartLine,
+  ChartScatter,
+  Clock,
+  Code,
+  Database,
+  Info as InfoIcon,
+  Layers,
+  ListOrdered,
+  Lock,
+  Network,
+  Pencil,
+  Rocket,
+  Search,
+  Server,
+  Shield,
+  Sparkles,
+  VectorSquare,
+} from "lucide-react";
+
+const CARD_ICONS = {
+  "arrow-down-to-line": ArrowDownToLine,
+  "book-open": BookOpen,
+  "chart-bar": ChartBar,
+  "chart-line": ChartLine,
+  "chart-scatter": ChartScatter,
+  "circle-info": InfoIcon,
+  "list-ordered": ListOrdered,
+  "magnifying-glass": Search,
+  "vector-square": VectorSquare,
+  bolt: Bolt,
+  brain: Brain,
+  clock: Clock,
+  code: Code,
+  database: Database,
+  layers: Layers,
+  lock: Lock,
+  pencil: Pencil,
+  rocket: Rocket,
+  server: Server,
+  shield: Shield,
+  sitemap: Network,
+  sparkles: Sparkles,
+};
 
 function Field({ kind, path, name, type, required, children, default: defaultValue }) {
   const label = path ?? name;
@@ -122,11 +171,29 @@ function CardGroup({ children, cols = 2 }) {
   );
 }
 
+function CardIcon({ icon }) {
+  if (!icon) {
+    return null;
+  }
+  if (React.isValidElement(icon)) {
+    return <span className="membrane-card__icon" aria-hidden="true">{icon}</span>;
+  }
+  const Icon = typeof icon === "string" ? CARD_ICONS[icon] : null;
+  if (!Icon) {
+    return null;
+  }
+  return (
+    <span className="membrane-card__icon" aria-hidden="true">
+      <Icon size={20} strokeWidth={2} />
+    </span>
+  );
+}
+
 function Card({ title, icon, href, children }) {
   const body = (
     <div className="membrane-card">
       <div className="membrane-card__header">
-        {icon ? <span className="membrane-card__icon" aria-hidden="true">{icon}</span> : null}
+        <CardIcon icon={icon} />
         {title ? <strong>{title}</strong> : null}
       </div>
       <div className="membrane-card__body">{children}</div>