From 09d8c279722c44cb82a4f6692c578fb4d0b557d3 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 22 Jan 2026 00:01:32 +0800
Subject: [PATCH] feat(icons): replace MCP button icon with official MCP logo

Use inline SVG for MCP icon to support currentColor inheritance,
enabling proper hover color transitions.
---
 src/App.tsx                   |  4 ++--
 src/components/BrandIcons.tsx | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 29be74cb7..498b29568 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,6 @@ import {
   // Bot, // TODO: Agents 功能开发中，暂时不需要
   Book,
   Wrench,
-  Server,
   RefreshCw,
   Search,
   Download,
@@ -52,6 +51,7 @@ import UnifiedSkillsPanel from "@/components/skills/UnifiedSkillsPanel";
 import { DeepLinkImportDialog } from "@/components/DeepLinkImportDialog";
 import { AgentsPanel } from "@/components/agents/AgentsPanel";
 import { UniversalProviderPanel } from "@/components/universal";
+import { McpIcon } from "@/components/BrandIcons";
 import { Button } from "@/components/ui/button";
 
 type View =
@@ -943,7 +943,7 @@ function App() {
                     className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
                     title={t("mcp.title")}
                   >
-                    <Server className="w-4 h-4" />
+                    <McpIcon size={16} />
                   </Button>
                 </div>
 
diff --git a/src/components/BrandIcons.tsx b/src/components/BrandIcons.tsx
index 54ead109d..f6a68c67a 100644
--- a/src/components/BrandIcons.tsx
+++ b/src/components/BrandIcons.tsx
@@ -46,3 +46,21 @@ export function GeminiIcon({ size = 16, className = "" }: IconProps) {
     />
   );
 }
+
+// MCP icon uses inline SVG to support currentColor for hover effects
+export function McpIcon({ size = 16, className = "" }: IconProps) {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      width={size}
+      className={className}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z" />
+      <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z" />
+    </svg>
+  );
+}