color category icon

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { usePathname } from "next/navigation";
 import Image from "next/image";
 import clsx from "clsx";
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
@@ -7,6 +8,74 @@ import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
 import { Category } from "@/app/[name]/(Main)/types/Types";
 
+const SVG_MASK_STYLE = {
+  maskSize: "contain",
+  maskRepeat: "no-repeat",
+  maskPosition: "center",
+  WebkitMaskSize: "contain",
+  WebkitMaskRepeat: "no-repeat",
+  WebkitMaskPosition: "center",
+} as const;
+
+function CategoryImage({
+  src,
+  size,
+  alt,
+  proxyBase,
+}: {
+  src: string;
+  size: number;
+  alt: string;
+  proxyBase: string | null;
+}) {
+  const isSvg = src.endsWith(".svg");
+
+  if (isSvg) {
+    const isSameOrigin =
+      src.startsWith("/") ||
+      (typeof window !== "undefined" &&
+        new URL(src, window.location.href).origin === window.location.origin);
+
+    const maskUrl = isSameOrigin
+      ? src
+      : proxyBase
+        ? `${proxyBase}/api/proxy-svg?url=${encodeURIComponent(src)}`
+        : null;
+
+    if (maskUrl) {
+      return (
+        <div
+          className="shrink-0 bg-primary"
+          style={{
+            width: size,
+            height: size,
+            maskImage: `url(${maskUrl})`,
+            WebkitMaskImage: `url(${maskUrl})`,
+            ...SVG_MASK_STYLE,
+          }}
+          role="img"
+          aria-label={alt}
+        />
+      );
+    }
+
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={src}
+        width={size}
+        height={size}
+        alt={alt}
+        className="shrink-0 object-contain"
+      />
+    );
+  }
+
+  return (
+    <Image priority src={src} width={size} height={size} alt={alt} />
+  );
+}
+
 type Variant = "large" | "small";
 
 const variantConfig: Record<
@@ -41,6 +110,8 @@ const CategoryScroll = ({
   variant = "large",
   className,
 }: Props) => {
+  const segment = usePathname()?.split("/").filter(Boolean)[0];
+  const proxyBase = segment != null ? `/${segment}` : null;
   const { renderer: Renderer, imageSize } = variantConfig[variant];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
@@ -76,12 +147,11 @@ const CategoryScroll = ({
             className={clsx(isSelected && "bg-container!")}
             onClick={handleSelect(item.id)}
           >
-            <Image
-              priority
+            <CategoryImage
               src={item.avatarUrl || "/assets/images/food-image.png"}
-              width={imageSize}
-              height={imageSize}
+              size={imageSize}
               alt="category image"
+              proxyBase={proxyBase}
             />
             <span className="text-xs text-foreground text-center">{item.title}</span>
           </Renderer>