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>
This commit is contained in:
soroush.asadi
2026-06-02 23:29:01 +03:30
parent b47314fcab
commit 0cbfcbfdf7
2 changed files with 13 additions and 0 deletions
+12
View File
@@ -30,6 +30,18 @@ export function AdminThumb({
</div> </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 ( return (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img <img
+1
View File
@@ -44,6 +44,7 @@ export const categoriesConfig: ResourceConfig = {
canDelete: true, canDelete: true,
columns: [ columns: [
{ key: "image_url", label: "Image", type: "image" }, { key: "image_url", label: "Image", type: "image" },
{ key: "icon", label: "Icon", type: "image" },
{ key: "name", label: "Name" }, { key: "name", label: "Name" },
{ key: "slug", label: "Slug" }, { key: "slug", label: "Slug" },
{ key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") }, { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },