From fe033cd0b339e9a00f0212ce250c5a4afd620170 Mon Sep 17 00:00:00 2001
From: diegosouzapw <diegosouzapw@users.noreply.github.com>
Date: Tue, 24 Mar 2026 07:52:07 -0300
Subject: [PATCH] fix: add SVG fallback to ProviderIcon component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ProviderIcon now tries: Lobehub → PNG → SVG → GenericIcon.
This resolves 11 providers that only have SVG icons
(comfyui, sdwebui, vertex, cartesia, zai, synthetic,
opencode-go/zen, puter, apikey, oauth).
---
 src/shared/components/ProviderIcon.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/ProviderIcon.tsx b/src/shared/components/ProviderIcon.tsx
index a6d5f5fbb4..9c1fb70865 100644
--- a/src/shared/components/ProviderIcon.tsx
+++ b/src/shared/components/ProviderIcon.tsx
@@ -6,7 +6,8 @@
  * Strategy (#529):
  * 1. Try @lobehub/icons ProviderIcon (130+ providers, React components)
  * 2. Fall back to /providers/{id}.png (existing static assets)
- * 3. Fall back to a generic AI icon
+ * 3. Fall back to /providers/{id}.svg (SVG assets)
+ * 4. Fall back to a generic AI icon
  *
  * Usage:
  *   <ProviderIcon providerId="openai" size={24} />
@@ -123,6 +124,7 @@ const ProviderIcon = memo(function ProviderIcon({
   const lobehubId = LOBEHUB_PROVIDER_MAP[providerId.toLowerCase()] ?? null;
   const [useLobehub, setUseLobehub] = useState(lobehubId !== null);
   const [usePng, setUsePng] = useState(true);
+  const [useSvg, setUseSvg] = useState(true);
 
   if (useLobehub && lobehubId) {
     return (
@@ -156,6 +158,25 @@ const ProviderIcon = memo(function ProviderIcon({
     );
   }
 
+  if (useSvg) {
+    return (
+      <span
+        className={className}
+        style={{ display: "inline-flex", alignItems: "center", ...style }}
+      >
+        <Image
+          src={`/providers/${providerId}.svg`}
+          alt={providerId}
+          width={size}
+          height={size}
+          style={{ objectFit: "contain" }}
+          onError={() => setUseSvg(false)}
+          unoptimized
+        />
+      </span>
+    );
+  }
+
   return (
     <span className={className} style={{ display: "inline-flex", alignItems: "center", ...style }}>
       <GenericProviderIcon size={size} />