Use icons instead of Emojis in MCP page

.changeset/mean-ears-press.md

@@ -0,0 +1,7 @@
+---
+"@gradio/core": patch
+"@gradio/icons": patch
+"gradio": patch
+---
+
+feat:Use icons instead of Emojis in MCP page

js/core/src/api_docs/MCPSnippet.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Block } from "@gradio/atoms";
 	import CopyButton from "./CopyButton.svelte";
+	import { Tool, Prompt, Resource } from "@gradio/icons";
 
 	export let mcp_server_active: boolean;
 	export let mcp_server_url: string;
@@ -42,10 +43,10 @@
 		["stdio", "STDIO"]
 	] as const;
 
-	const tool_type_emojis = {
-		tool: "🔧",
-		resource: "📕",
-		prompt: "💬"
+	const tool_type_icons: Record<Tool["meta"]["mcp_type"], typeof Tool> = {
+		tool: Tool,
+		resource: Resource,
+		prompt: Prompt
 	};
 
 	$: display_url =
@@ -145,11 +146,15 @@
 	{/if}
 
 	<div class="tool-selection">
-		<strong
-			>{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools
-			({tool_type_emojis.tool}), Resources ({tool_type_emojis.resource}), and
-			Prompts ({tool_type_emojis.prompt})</strong
-		>
+		<strong>
+			{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools
+			(<span style="display: inline-block; vertical-align: sub;"><Tool /></span
+			>), Resources (<span style="display: inline-block; vertical-align: sub;"
+				><Resource /></span
+			>), and Prompts (<span style="display: inline-block; vertical-align: sub;"
+				><Prompt /></span
+			>)
+		</strong>
 		{#if all_tools.length > 0}
 			<div class="tool-selection-controls">
 				<button
@@ -199,17 +204,23 @@
 						class="tool-header"
 						on:click={() => (tool.expanded = !tool.expanded)}
 					>
-						<span
-							><span class="tool-name"
-								>{tool_type_emojis[tool.meta.mcp_type]} {tool.name}</span
+						<span style="display: inline-block">
+							<span
+								style="display: inline-block; padding-right: 6px; vertical-align: sub"
 							>
+								{#if tool_type_icons[tool.meta.mcp_type]}
+									{@const Icon = tool_type_icons[tool.meta.mcp_type]}
+									<Icon />
+								{/if}
+							</span>
+							<span class="tool-name">{tool.name}</span>
 							&nbsp;
-							<span class="tool-description"
-								>{tool.description
+							<span class="tool-description">
+								{tool.description
 									? tool.description
-									: "⚠︎ No description provided in function docstring"}</span
-							></span
-						>
+									: "⚠︎ No description provided in function docstring"}
+							</span>
+						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
 					</button>
 				</div>
@@ -614,4 +625,6 @@
 	a {
 		text-decoration: underline;
 	}
+
+	/* .mcp-icon is now styled above */
 </style>

js/icons/src/Prompt.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let icon_size = 16;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={icon_size}
+	height={icon_size}
+	viewBox="0 0 32 32"
+	><path
+		fill="currentColor"
+		d="M17.74 30L16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z"
+	/><path fill="currentColor" d="M8 10h16v2H8zm0 6h10v2H8z" /></svg
+>

js/icons/src/Resource.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let icon_size = 16;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={icon_size}
+	height={icon_size}
+	viewBox="0 0 32 32"
+	><path fill="currentColor" d="M19 10h7v2h-7zm0 5h7v2h-7zm0 5h7v2h-7z" /><path
+		fill="currentColor"
+		d="M28 5H4a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h24a2.003 2.003 0 0 0 2-2V7a2 2 0 0 0-2-2M4 7h11v18H4Zm13 18V7h11l.002 18Z"
+	/></svg
+>

js/icons/src/Tool.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let icon_size = 16;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={icon_size}
+	height={icon_size}
+	viewBox="0 0 32 32"
+	><path
+		fill="currentColor"
+		d="M12.1 2a9.8 9.8 0 0 0-5.4 1.6l6.4 6.4a2.1 2.1 0 0 1 .2 3a2.1 2.1 0 0 1-3-.2L3.7 6.4A9.84 9.84 0 0 0 2 12.1a10.14 10.14 0 0 0 10.1 10.1a11 11 0 0 0 2.6-.3l6.7 6.7a5 5 0 0 0 7.1-7.1l-6.7-6.7a11 11 0 0 0 .3-2.6A10 10 0 0 0 12.1 2m8 10.1a7.6 7.6 0 0 1-.3 2.1l-.3 1.1l.8.8l6.7 6.7a2.88 2.88 0 0 1 .9 2.1A2.72 2.72 0 0 1 27 27a2.9 2.9 0 0 1-4.2 0l-6.7-6.7l-.8-.8l-1.1.3a7.6 7.6 0 0 1-2.1.3a8.27 8.27 0 0 1-5.7-2.3A7.63 7.63 0 0 1 4 12.1a8.3 8.3 0 0 1 .3-2.2l4.4 4.4a4.14 4.14 0 0 0 5.9.2a4.14 4.14 0 0 0-.2-5.9L10 4.2a6.5 6.5 0 0 1 2-.3a8.27 8.27 0 0 1 5.7 2.3a8.5 8.5 0 0 1 2.4 5.9"
+	/></svg
+>

js/icons/src/index.ts

@@ -72,3 +72,6 @@ export { default as Retry } from "./Retry.svelte";
 export { default as ScrollDownArrow } from "./ScrollDownArrow.svelte";
 export { default as ZoomIn } from "./ZoomIn.svelte";
 export { default as ZoomOut } from "./ZoomOut.svelte";
+export { default as Tool } from "./Tool.svelte";
+export { default as Prompt } from "./Prompt.svelte";
+export { default as Resource } from "./Resource.svelte";