feat: replace editor icon with custom PNG using CSS mask

apps/web/src/components/common/image-edit-icon.tsx

@@ -1,21 +1,19 @@
-import type { SVGProps } from "react";
+export function ImageEditIcon({ className }: { className?: string }) {
-
-export function ImageEditIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
+    <span
-      xmlns="http://www.w3.org/2000/svg"
+      className={className}
-      viewBox="0 0 24 24"
+      style={{
-      fill="none"
+        display: "inline-block",
-      stroke="currentColor"
+        backgroundColor: "currentColor",
-      strokeWidth={2}
+        maskImage: "url(/edit-image.png)",
-      strokeLinecap="round"
+        maskSize: "contain",
-      strokeLinejoin="round"
+        maskRepeat: "no-repeat",
-      {...props}
+        maskPosition: "center",
-    >
+        WebkitMaskImage: "url(/edit-image.png)",
-      <path d="M12 20H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7" />
+        WebkitMaskSize: "contain",
-      <circle cx="8.5" cy="8.5" r="1.5" />
+        WebkitMaskRepeat: "no-repeat",
-      <path d="m3 20 4.5-4.5L10 18" />
+        WebkitMaskPosition: "center",
-      <path d="m18.4 12.6-5.9 5.9-.5 2.5 2.5-.5 5.9-5.9a1.5 1.5 0 0 0-2.1-2.1z" />
+      }}
-    </svg>
+    />
   );
 }

apps/web/src/components/layout/sidebar.tsx

@@ -1,5 +1,5 @@
 import { FolderOpen, Grid3x3, HelpCircle, LayoutGrid, Settings, Workflow } from "lucide-react";
-import type { ComponentType, SVGProps } from "react";
+import type { ComponentType } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useTranslation } from "@/contexts/i18n-context";
 import { cn } from "@/lib/utils";
@@ -7,7 +7,7 @@ import { ImageEditIcon } from "../common/image-edit-icon";
 import { OtterLogo } from "../common/otter-logo";
 
 interface SidebarItem {
-  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  icon: ComponentType<{ className?: string }>;
   label: string;
   href?: string;
 }