AI导哈

SVG图标服务

一个提供Heroicons SVG图标的MCP服务器，支持按样式列出、搜索和检索图标。

  • by oli799
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 oli799/heroicons-svg-mcp

使用说明

女英雄svg mcp

提供以下功能的MCP服务器 英雄图标 作为SVG。

此服务器允许MCP客户端（例如Claude、Cline或Codex）轻松：

  • 按样式列出图标，
  • 按名称或关键字搜索图标，
  • 检索特定图标的完整SVG源代码。

特性

  • 使用Heroicons 2.x heroicons npm包。
  • 支持的样式：
    • outline （24x24）
    • solid （24x24）
    • mini （20x20）
    • micro （16x16）
  • 内置缓存以提高性能：
    • 图标名称缓存，
    • 图标文件路径缓存，
    • SVG内容缓存。
  • 当输入无效或图标无法解析时，会出现详细的错误消息。
  • 测试涵盖(vitest).

需求

  • Node.js 18+
  • npm

跑步

服务器使用stdio MCP传输，因此您的MCP客户端应使用以下命令启动它：

npx -y heroicons-svg-mcp@latest

Claude代码示例

将此添加到您的Claude Code MCP配置中：

{
  "mcpServers": {
    "heroicons-svg": {
      "command": "npx",
      "args": ["-y", "heroicons-svg-mcp@latest"]
    }
  }
}

光标示例

将此添加到您的Cursor MCP配置中（例如 .cursor/mcp.json):

{
  "mcpServers": {
    "heroicons-svg": {
      "command": "npx",
      "args": ["-y", "heroicons-svg-mcp@latest"]
    }
  }
}

Codex风格的TOML示例：

[mcp_servers.heroicons-svg]
command = "npx"
args = ["-y", "heroicons-svg-mcp@latest"]

可用工具

list_icons

描述：列出所有可用的Heroicons，可选择按样式过滤。

输入：

  • style （可选）： outline | solid | mini | micro

示例输入：

{
  "style": "outline"
}

答复：

  • content[0].text：人类可读的文本输出。
  • structuredContent:
    • icons: { name, style }[]
    • iconsByStyle：按样式分组的图标名称
    • styles：包含样式
    • total：图标变体总数

search_icons

描述：按名称或关键字搜索Heroicons，可选择按样式过滤。

输入：

  • query （必填）：搜索文本
  • style （可选）： outline | solid | mini | micro

示例输入：

{
  "query": "arrow right",
  "style": "mini"
}

答复：

  • content[0].text：人类可读的匹配列表。
  • structuredContent:
    • icons: { name, style, score }[] （排名赛）
    • query：规范化搜索查询
    • styles：包含样式
    • total：总匹配计数

retrieve_icon

描述：检索图标的完整SVG源代码。

输入：

  • name （必填）：图标名称（例如 academic-cap)
  • style （必填）： outline | solid | mini | micro

示例输入：

{
  "name": "academic-cap",
  "style": "outline"
}

答复：

  • content[0].text：完全有效的SVG标记(<svg ...>...</svg>)
  • structuredContent:
    • name
    • style
    • svg （相同的SVG源）

发展

运行测试：

npm test

运行覆盖率测试：

npm run test:coverage

观看模式：

npm run test:watch

项目结构

  • index.js：CLI引导入口点。
  • src/server.js：MCP服务器创建和工具注册。
  • src/icons.js：图标逻辑、搜索、检索、缓存。
  • tests/icons.unit.test.mjs：单元测试。
  • tests/server.integration.test.mjs：MCP服务器集成测试。
  • tests/index.bootstrap.test.mjs：CLI/引导行为测试。

错误处理

典型错误案例：

  • 不支持 style 价值，
  • 缺失或无效 name,
  • 在指定样式中找不到图标。

服务器返回详细的、可操作的错误，以便MCP客户端能够提供清晰的反馈。

示例：

  • Unsupported style "foo". Supported styles: outline, solid, mini, micro.
  • Invalid icon name "...".
  • Icon "academic-cap" not found in style "mini".

许可证

  • 项目：麻省理工学院
  • 英雄：MIT

相关 MCP