From 2f1b6f9f72ed20b82dded61fb9aa768cff82dce1 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Wed, 5 Feb 2025 14:09:41 +0100
Subject: [PATCH] feat(nx-dev): allow link-card components to take an image URL

---
 .../src/lib/tags/cards.component.tsx          | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index 3402a4361979d..3cc4c6c5a9b10 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -117,7 +117,7 @@ export function LinkCard({
 }: {
   title: string;
   type: string;
-  icon: string; // `icon` is the link to the SVG file
+  icon: string; // Can be either a component name or a direct image URL
   url: string;
   appearance?: 'default' | 'small';
 }): JSX.Element {
@@ -138,13 +138,20 @@ export function LinkCard({
             }
           )}
         >
-          {icon &&
-            (frameworkIcons[icon as Framework]?.image ||
-              callIfFunction(nxDevIcons[icon as keyof typeof nxDevIcons]) ||
-              callIfFunction(
-                (heroIcons[icon as keyof typeof heroIcons] as any)?.render,
-                { className: 'w-full h-full' }
-              ))}
+          {icon.startsWith('/') ? (
+            <img
+              src={icon}
+              alt={title}
+              className="h-full w-full object-contain"
+            />
+          ) : (
+            frameworkIcons[icon as Framework]?.image ||
+            callIfFunction(nxDevIcons[icon as keyof typeof nxDevIcons]) ||
+            callIfFunction(
+              (heroIcons[icon as keyof typeof heroIcons] as any)?.render,
+              { className: 'w-full h-full' }
+            )
+          )}
         </div>
       )}
       <div