From 85e693e0023bc13d2ee124d793be7993bbfd38b7 Mon Sep 17 00:00:00 2001
From: Johannes Liermann <liermann@uni-mainz.de>
Date: Tue, 2 Dec 2025 17:27:03 +0100
Subject: [PATCH] feat(theme): improve CardLink logic to support PNG or JPEG
 icons

---
 .../src/theme/DocCard/index.tsx               | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx
index 282580bd28..ad8dba2379 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx
@@ -115,18 +115,27 @@ function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
 function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
   const defaultIcon = isInternalUrl(item.href) ? '📄' : '🔗';
 
-  const customIcon =
-    typeof item.icon === 'string' && item.icon.startsWith('data:image') ? (
-      <img
-        src={item.icon}
-        alt={`${item.label  }-icon`}
-        style={{maxWidth: '24px', maxHeight: '24px'}}
-      />
-    ) : (
-      item.icon
-    );
+  let customIcon;
 
-  const icon = item.icon ? customIcon : defaultIcon;
+  // If the icon is a string, it can be an simple string icon or a PNG/JPEG image, render accordingly
+  if (typeof item.icon === 'string') {
+    if (
+      /^data:image\/(?:png|jpe?g)/i.test(item.icon) ||
+      /\.(?:png|jpe?g)/i.test(item.icon)
+    ) {
+      customIcon = (
+        <img
+          src={item.icon}
+          alt={`${item.label}-icon`}
+          style={{maxWidth: '24px', maxHeight: '24px'}}
+        />
+      );
+    } else {
+      customIcon = item.icon;
+    }
+  }
+
+  const icon = customIcon || defaultIcon;
   const doc = useDocById(item.docId ?? undefined);
 
   return (