Lucide Icons MCP

🚀 lucide-icons-mcp

这是一个基于 Model Context Protocol (MCP) 的服务器，它将 Lucide React 图标作为资源和工具，提供给大语言模型（LLMs）和智能代理应用程序使用。该项目使用 Bun 和 MCP TypeScript SDK 构建。

🚀 快速开始

前提条件

• 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

✨ 主要特性

• 🔍 图标搜索：可按名称或类别搜索 1500 多个 Lucide 图标。
• 📂 类别浏览：按类别（设计、通信、媒体等）列出图标。
• 💡 使用示例：获取任何图标的 React/JSX 代码示例。
• 🔧 图标信息：提供每个图标的详细信息。
• 🚀 MCP 集成：可与 Claude Desktop 和其他 MCP 客户端配合使用。
• 🌐 双模式：支持 HTTP 服务器或基于标准输入输出的 MCP 服务器。
• 📊 全面覆盖：涵盖所有 Lucide 图标，并提供正确的 JSX 使用方法。

📦 安装指南

HTTP 模式

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

npx lucide-icons-mcp

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

或者全局安装：

npm install -g lucide-icons-mcp

然后运行：

lucide-icons-mcp

标准输入输出模式

npx lucide-icons-mcp --stdio
# 或者如果已全局安装
lucide-icons-mcp --stdio

💻 使用示例

基础用法

以下是 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
}

高级用法

在本地使用 MCP Inspector 测试 MCP 服务器： 首先，确保项目已构建：

bun run build

然后启动 Inspector：

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

这将打开 Inspector 界面，用于交互式测试你的 MCP 服务器。

📚 详细文档

本地开发

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

1. HTTP 模式

适用于支持通过 HTTP 进行通信的客户端。 开发时（使用 Bun）：

bun run start
# 或者直接运行
bun run src/entry.ts

2. 标准输入输出模式

常用于与 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（字符串）：图标名称或类别的搜索词。
  • category（可选字符串）：按特定类别过滤。
  • limit（可选数字）：返回的最大结果数。
• 返回值：包含 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

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

图标类别

Lucide 图标按以下类别组织：

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

开发脚本

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

数据源

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

资源

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

📄 许可证

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

本项目引用了 Lucide（https://lucide.dev/）的图标，这些图标遵循其 ISC 许可证：

ISC 许可证

部分 Lucide 的版权归 Cole Bemis 2013 - 2022 所有，作为 Feather（MIT）的一部分。Lucide 的其他版权归 Lucide 贡献者 2022 所有。

特此授予任何获得本软件副本和相关文档文件（“软件”）的人免费使用、复制、修改和/或分发本软件的权利，无论出于何种目的，前提是上述版权声明和本许可声明出现在所有副本中。

软件按“原样”提供，作者对本软件不承担任何形式的保证，包括所有隐含的适销性和适用性保证。在任何情况下，作者均不对因使用、数据丢失或利润损失而导致的任何特殊、直接、间接或后果性损害或任何损害承担责任，无论该损害是因合同行为、疏忽或其他侵权行为引起的，还是与本软件的使用或性能有关。