From 8ea43997395278499f7fef357de8f1fe8a4ff29b Mon Sep 17 00:00:00 2001 From: SnapOtter Date: Sun, 17 May 2026 11:47:39 +0800 Subject: [PATCH] feat: replace editor icon with custom PNG using CSS mask --- apps/web/public/edit-image.png | Bin 0 -> 11495 bytes .../src/components/common/image-edit-icon.tsx | 34 +++++++++--------- apps/web/src/components/layout/sidebar.tsx | 4 +-- 3 files changed, 18 insertions(+), 20 deletions(-) create mode 100644 apps/web/public/edit-image.png diff --git a/apps/web/public/edit-image.png b/apps/web/public/edit-image.png new file mode 100644 index 0000000000000000000000000000000000000000..da3b8054441f1faa088bee48516753964d216fac GIT binary patch literal 11495 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 literal 0 HcmV?d00001 diff --git a/apps/web/src/components/common/image-edit-icon.tsx b/apps/web/src/components/common/image-edit-icon.tsx index e8e05e63..2d3251e3 100644 --- a/apps/web/src/components/common/image-edit-icon.tsx +++ b/apps/web/src/components/common/image-edit-icon.tsx @@ -1,21 +1,19 @@ -import type { SVGProps } from "react"; - -export function ImageEditIcon(props: SVGProps) { +export function ImageEditIcon({ className }: { className?: string }) { return ( - - - - - - + ); } diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx index b30941d7..858c9664 100644 --- a/apps/web/src/components/layout/sidebar.tsx +++ b/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>; + icon: ComponentType<{ className?: string }>; label: string; href?: string; }