SVG图标语义搜索MCP服务

mcp-icon 是一款面向开发者的 MCP 服务,提供超过 100,000 个 SVG 信息图图标的语义搜索能力,开发者可在 Claude Desktop、VS Code 等兼容 MCP 的客户端中通过关键词快速获取匹配的图标 URL。

  • by hustcc
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 hustcc/mcp-icon

使用说明

🎨 mcp-icon

A Model Context Protocol (MCP) server for semantic SVG icon search.

Generate infographic SVG icons by keyword — over 100,000 icons with semantic search support, powered by AntV Infographic.


📋 Table of Contents


✨ Features

  • 🔍 Semantic search — Find icons by meaning, not just exact names
  • 🖼️ 100,000+ SVG icons — A massive library of high-quality infographic icons
  • ⚡ Three transport modes — stdio, sse, and streamable-http
  • 🪶 Minimal dependencies — Clean, focused implementation
  • 🧪 Fully tested — Unit tests with Vitest

Available Tool

Tool Description
search_icons Search for SVG icons by keyword. Returns a list of SVG URLs matching the semantic query.

search_icons parameters:

Parameter Type Required Default Description
keyword string ✅ — Search keyword or phrase (e.g. "data analysis", "cloud")
topK number ❌ 3 Number of icons to return (1–20)

🤖 Usage

Add to your MCP client configuration (e.g. Claude Desktop, VS Code, Cursor):

macOS / Linux:

{
  "mcpServers": {
    "mcp-icon": {
      "command": "npx",
      "args": ["-y", "mcp-icon"]
    }
  }
}

Windows:

{
  "mcpServers": {
    "mcp-icon": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "mcp-icon"]
    }
  }
}

🚰 Transport Modes

mcp-icon supports three standard MCP transport protocols.

stdio (default)

Used by desktop MCP clients (Claude Desktop, Cursor, etc.):

npx mcp-icon
# or explicitly:
npx mcp-icon --transport stdio

SSE (Server-Sent Events)

npx mcp-icon --transport sse --port 3456
# Server available at: http://localhost:3456/sse

Streamable HTTP

npx mcp-icon --transport streamable --port 3456
# Server available at: http://localhost:3456/mcp

🎮 CLI Options

mcp-icon CLI

Options:
  --transport, -t  Transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Host for SSE or streamable transport (default: localhost)
  --port, -p       Port for SSE or streamable transport (default: 3456)
  --endpoint, -e   Endpoint path:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

🔨 Development

# Clone the repository
git clone https://github.com/hustcc/mcp-icon.git
cd mcp-icon

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test

# Start with MCP inspector (for local debugging)
npm start

Project Structure

src/
├── index.ts          # CLI entry point
├── server.ts         # MCP server + tool handlers
├── services/
│   ├── stdio.ts      # Stdio transport
│   ├── sse.ts        # SSE transport
│   └── streamable.ts # Streamable HTTP transport
├── tools/
│   └── search-icons.ts  # Tool definition
└── utils/
    ├── api.ts        # Icon search API client
    └── logger.ts     # Logger utility
tests/
├── api.test.ts       # API client unit tests
└── server.test.ts    # MCP server integration tests

📄 License

MIT © hustcc