lucide-icons-mcp

lucide-icons-mcp

一个 Model Context Protocol (MCP) 服务，将 Lucide React 图标作为资源和工具提供给大模型和 Agent 应用使用。使用 Bun 和 MCP TypeScript SDK 构建。

什么是 Lucide？

Lucide 是一套由社区打造、美观且风格统一的图标工具包。它是一个开源图标库，以统一的风格提供 1,500 多个精心制作的图标。Lucide 最初从 Feather Icons 分支而来，现已成为现代 Web 开发中最受欢迎的图标库之一。

什么是 MCP？

Model Context Protocol (MCP) 是一项标准，供 AI 工具从主要训练数据之外的来源请求特定上下文。

此 MCP 服务允许 AI 编码助手和其他 Agent 应用访问 Lucide React 图标信息，从而更好地协助搜索、发现和使用图标。

功能

• 🔍 图标搜索：按名称或类别搜索 1,500 多个 Lucide 图标
• 📂 按类别浏览：按类别列出图标（设计、通信、媒体等）
• 💡 用法示例：获取任意图标的 React/JSX 代码示例
• 🔧 图标信息：查看每个图标的详细信息
• 🚀 MCP 集成：可用于 Claude Desktop 和其他 MCP 客户端
• 🌐 双模式：HTTP 服务或基于 stdio 的 MCP 服务
• 📊 全面覆盖：涵盖所有 Lucide 图标，并提供规范的 JSX 用法

前置条件

• Git
• Bun 或 Node.js

开始使用（开发）

1. 克隆仓库

git clone https://github.com/SeeYangZhi/lucide-icons-mcp.git
cd lucide-icons-mcp

2. 安装 Bun（如果尚未安装）

请参阅官方 Bun 安装指南。
安装后，重启终端并检查：

bun --version

3. 安装依赖项

bun install

4. 构建项目

此操作会将 TypeScript 源码编译为 JavaScript，并输出到 build 目录。

bun run build

用法

HTTP 模式

你可以使用 npx 运行 HTTP 服务：

npx lucide-icons-mcp

这会启动 HTTP 服务（默认端口为 3000）。

也可以全局安装：

npm install -g lucide-icons-mcp

然后运行：

lucide-icons-mcp

Stdio 模式

npx lucide-icons-mcp --stdio
# or if installed globally
lucide-icons-mcp --stdio

本地开发

运行 MCP 服务主要有两种方式：

1. HTTP 模式

适用于支持通过 HTTP 通信的客户端。

用于开发（使用 Bun）：

bun run start
# or directly
bun run src/entry.ts

2. Stdio 模式

常用于与 Claude Desktop 或 MCP Inspector 等工具直接集成。

用于开发（使用 Bun）：

bun run src/entry.ts --stdio

配置 AI 工具

示例：Claude Desktop

要在 Claude Desktop 中使用此 MCP 服务：

1. 打开 Claude Desktop 配置文件：

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

2. 将服务添加到 mcpServers 部分：

选项 A：通过 npx（推荐）：

{
  "mcpServers": {
    "lucide-icons": {
      "command": "npx",
      "args": ["lucide-icons-mcp", "--stdio"]
    }
  }
}

选项 B：直接指向构建输出：

{
  "mcpServers": {
    "lucide-icons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/lucide-icons-mcp/build/entry.js", "--stdio"]
    }
  }
}

3. 保存文件并重启 Claude Desktop。
4. 现在，你应该可以在 Claude 的工具面板中看到可用的 "lucide-icons" 服务。

可用工具（MCP）

此 MCP 服务向 AI 编码助手提供以下工具。每个图标可以属于多个类别，从而灵活支持搜索和发现。

1. search_icons

• 描述：按名称或类别搜索 Lucide 图标。返回包含完整类别数组的图标。
• 参数：
  • query（string）：图标名称或类别的搜索词
  • category（可选 string）：按指定类别筛选
  • limit（可选 number）：返回结果的最大数量
• 返回值：包含 name 和 categories（字符串数组）的图标数组

2. search_categories

• 描述：按类别名称搜索图标类别，支持部分匹配
• 参数：
  • query（字符串）：类别名称的搜索词
  • limit（可选数字）：返回结果的最大数量
• 返回值：包含 name 和 iconCount 的类别数组

3. fuzzy_search_icons

• 描述：按图标名称模糊搜索 lucide 图标
• 参数：
  • query（字符串）：图标搜索词
  • limit（可选数字）：返回结果的最大数量
• 返回值：包含 name 和 categories（字符串数组）的图标数组

4. fuzzy_search_categories

• 描述：按类别名称模糊搜索图标类别
• 参数：
  • query（字符串）：类别名称的搜索词
  • limit（可选数字）：返回结果的最大数量
• 返回值：包含 name 和 iconCount（字符串数组）的类别数组

5. get_icon_usage_examples

• 描述：按确切名称获取 Lucide React 图标的用法示例
• 参数：
  • name（字符串）：图标搜索词
• 返回值：特定 Lucide 图标的 React/JSX 用法示例

6. list_all_icons_by_category

• 描述：列出特定类别中的所有图标
• 参数：
  • category（字符串）：要列出图标的类别名称
  • limit（可选数字）：返回结果的最大数量

7. list_all_categories

• 描述：列出所有可用图标类别及其图标数量

使用示例

以下是 AI 工具使用此 MCP 服务的示例：

示例 1：查找图标

用户：“帮我找与 ArrowRight 相关的图标”

AI 工具调用 search_icons：

{
  "query": "ArrowRight",
  "limit": 5
}

响应：列出诸如 ArrowRight 之类的图标

示例 2：获取用法示例

用户：“向我展示如何使用 ArrowRight 图标”

AI 工具调用 get_icon_usage_examples：

{
  "name": "ArrowRight"
}

响应：

import { ArrowRight } from "lucide-react";

function Example() {
  return (
    <div>
      <ArrowRight />
    </div>
  );
}

示例 3：浏览类别

用户：“有哪些与设计相关的图标？”

AI 工具调用 search_categories：

{
  "query": "design"
}

然后调用 list_icons_by_category”：

{
  "category": "Design",
  "limit": 10
}

图标类别

Lucide 图标按类别组织，例如：

• 无障碍
• 账户与访问
• 动物
• 箭头
• 品牌
• 建筑
• 图表
• 通信
• 连接
• 光标
• 设计
• 编码与开发
• 设备
• 表情符号
• 文件图标
• 金融
• 食品与饮料
• 游戏
• 家居
• 布局
• 邮件
• 数学
• 医疗
• 多媒体
• 自然
• 导航
• 通知
• 人物
• 摄影
• 科学
• 季节
• 安全
• 形状
• 购物
• 社交
• 体育
• 可持续发展
• 文本格式
• 时间与日历
• 工具
• 交通
• 旅行
• 天气

使用 Inspector 在本地测试 MCP

你可以使用 MCP Inspector 在本地测试 MCP 服务。

首先，确保项目已构建：

bun run build

然后启动 Inspector：

npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

这将打开 Inspector 界面，以便交互式测试你的 MCP 服务。

开发脚本

• bun run dev：以 HTTP 模式启动服务，用于开发
• bun run dev:stdio：启动 stdio MCP 服务，用于开发
• bun run build：将 TypeScript 编译为 JavaScript（输出到 build/）
• bun run lint：使用 ESLint 检查代码库
• bun run lint:fix：自动修复 lint 问题
• bun run crawl：爬取 Lucide 网站以更新图标数据
• bun run pre-build：爬取数据、构建图标元数据并修复 lint 问题

数据来源

本项目包含一个网络爬虫，可自动从 Lucide 网站提取图标信息，确保图标数据和类别保持最新。

资源

• Lucide - 图标库
• Lucide React - React 实现
• Model Context Protocol - MCP 规范
• MCP TypeScript SDK - 使用的 SDK
• MCP Inspector - 测试工具
• Bun - JavaScript 运行时

许可证

本项目采用 MIT 许可证。详情请参阅 LICENSE。

本项目引用了 Lucide 的图标（https://lucide.dev/），这些图标采用 ISC License：

ISC License

Lucide 部分内容的版权归 Cole Bemis 所有，版权所有 © 2013-2022，作为 Feather（MIT）的一部分。Lucide 其他所有内容的版权均归 Lucide Contributors 所有，版权所有 © 2022。

特此免费授予任何人使用、复制、修改和/或分发本软件的权利，无论是否收费，也无论用途为何，但须在所有副本中保留上述版权声明和本许可声明。

本软件按“原样”提供，作者不对本软件作任何明示或暗示的保证，包括但不限于对适销性和适用性的暗示保证。在任何情况下，作者均不对因使用本软件而导致的任何特殊、直接、间接或后果性损害，或任何其他损害承担责任，无论这些损害是因使用、数据或利润损失，还是因合同、过失或其他侵权行为而产生，也无论其是否与本软件的使用或性能有关。