SVG图标服务器

通用SVG图标MCP服务器

一个生产就绪的模型上下文协议（MCP）服务器，为LLM（如Claude&Gemini）提供即时访问 60000多个SVG图标 来自10个流行的开源集合。

它的特点是 模糊搜索, 自动AI回退, 顺风CSS类注入，以及 React/JSX支持，使其成为AI前端编码的完美伴侣。

✨ 特性

• 🔍 智能搜索： 模糊匹配发现 user-profile 即使你打字 user profile.
• 🛡️ 防弹可靠性： 如果API超时，自动速率限制和AI回退系统。
• 🎨 顺风准备就绪： 自动注射 w-6 h-6 和 currentColor （或自定义类）。
• 🛠️ 支持10+个收藏：
  • material （谷歌材料符号）
  • lucide （干净、现代、shadcn/ui标准）
  • heroicons （顺风实验室）
  • tabler, phosphor, fontawesome, feather, bootstrap, remix, iconoir
• ⚛️ React/JSX支持： 输出通用SVG或JSX就绪代码（camelCase属性）。

📦 安装

快速安装（Claude Code CLI）

运行以下单个命令：

claude mcp add universal-icons -- npx -y mcp-universal-icons

Claude桌面应用程序

将此添加到您的 claude_desktop_config.json:

雨衣： ~/Library/Application Support/Claude/claude_desktop_config.json
窗户： %APPDATA%\Claude\claude_desktop_config.json

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

谷歌Gemini CLI

您可以直接从存储库或通过NPM安装它：

Git扩展（推荐）

gemini extensions install https://github.com/awssat/mcp-universal-icons

NPM手册

gemini mcp add universal-icons npx -y mcp-universal-icons

游标/其他MCP客户端

• 命令： npx
• Args： -y mcp-universal-icons

🚀 如何使用

安装后，自然地问你的AI。

例子

1.基本用法

“从材质符号中给我一个圆形的主页图标。”

2.使用顺风CSS

“我需要一个使用Lucide的用户配置文件图标 w-8 h-8 text-blue-500."

3.搜索

在Tabler集合中搜索表示“速度”或“快”的图标

4.React/JSX

“给我一个React（JSX）格式的设置图标。”

🛠️ 可用工具

get_icon

获取原始SVG代码。

• icon_name：图标的名称（例如。， home, arrow-right).
• collection: lucide （默认）， material, heroicons, tabler, phosphor等等。
• variant：风格变体（例如。， sharp, solid, outline).
• classes：要注入的CSS类（例如。， w-6 h-6).
• format: svg （默认）， jsx，或 data-uri.

search_icons

当你不知道确切的名称时，搜索图标。

• query：搜索关键字（例如“分析图”）。
• collection：设置要搜索的内容。

health_check

验证与标志性API的连接。

⚖️ 许可证和商业使用

此MCP服务器是 MIT许可 （宽容）。

图标本身是根据各自的开源许可证提供的。 所有支持的集合对于商业项目都是安全的。

*FontAwesome Free需要注明出处（例如，在页脚或“关于”页面中）。

注： 这个工具只是从标志性的API获取官方SVG。它不会修改许可条款。

📄 许可证

MIT© Awssat