From 0cbfcbfdf7709304ba754a08405f4d9c3efd3e49 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Tue, 2 Jun 2026 23:29:01 +0330
Subject: [PATCH] feat(admin): render inline SVG category icons in tables

AdminThumb detects raw <svg> markup and renders it inline (object-contain);
categories list shows an Icon column. Admin-entered, authenticated input.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/admin/AdminThumb.tsx      | 12 ++++++++++++
 src/components/admin/admin-resources.tsx |  1 +
 2 files changed, 13 insertions(+)

diff --git a/src/components/admin/AdminThumb.tsx b/src/components/admin/AdminThumb.tsx
index 011ca55..d6f7e29 100644
--- a/src/components/admin/AdminThumb.tsx
+++ b/src/components/admin/AdminThumb.tsx
@@ -30,6 +30,18 @@ export function AdminThumb({
       </div>
     );
   }
+
+  // Inline SVG markup (admin-entered, e.g. category icons) → render directly.
+  if (url.startsWith("<svg")) {
+    return (
+      <div
+        style={{ width: size, height: size }}
+        className={`flex items-center justify-center border border-[#262b40] bg-[#0c0e1a] p-1 text-gray-200 [&>svg]:h-full [&>svg]:w-full [&>svg]:object-contain ${rounded}`}
+        // Admin-only, authenticated input.
+        dangerouslySetInnerHTML={{ __html: url }}
+      />
+    );
+  }
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
diff --git a/src/components/admin/admin-resources.tsx b/src/components/admin/admin-resources.tsx
index e221461..1b29c1a 100644
--- a/src/components/admin/admin-resources.tsx
+++ b/src/components/admin/admin-resources.tsx
@@ -44,6 +44,7 @@ export const categoriesConfig: ResourceConfig = {
   canDelete: true,
   columns: [
     { key: "image_url", label: "Image", type: "image" },
+    { key: "icon", label: "Icon", type: "image" },
     { key: "name", label: "Name" },
     { key: "slug", label: "Slug" },
     { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },