Lucide Icons MCP

清晰图标mcp


A. 模型上下文协议（MCP） 服务器暴露 Lucide反应 图标作为LLM和代理应用程序的资源和工具。使用Bun和MCP TypeScript SDK构建。

Lucide是什么？

Lucide 是社区制作的一个美观且一致的图标工具包。这是一个开源图标库，以单一、一致的风格提供了1500多个精心制作的图标。Lucide最初是从Feather Icons分叉而来的，现已发展成为现代web开发中最受欢迎的图标库之一。

什么是MCP？

这 模型上下文协议（MCP） 是人工智能工具从其主要训练数据之外的来源请求特定上下文的标准。

此MCP服务器允许AI编码助手和其他代理应用程序访问有关Lucide React图标的信息，从而在图标搜索、发现和实现方面提供更好的帮助。

特性

• 🔍 图标搜索：按名称或类别搜索1500多个Lucide图标
• 📂 类别浏览：按类别列出图标（设计、通信、媒体等）
• 💡 使用示例：获取任何图标的React/JSX代码示例
• 🔧 图标信息：每个图标的详细信息
• 🚀 MCP集成：已为Claude Desktop和其他MCP客户端做好准备
• 🌐 双模式：HTTP服务器或基于stdio的MCP服务器
• 📊 全面覆盖：所有正确使用JSX的Lucide图标

先决条件

• Git
• 包子 或

入门（开发）

1.克隆存储库

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

2.安装Bun（如果没有）

请咨询官方 丁腈橡胶安装指南.\ 安装后，重新启动终端并检查：

bun --version

3.安装依赖项

bun install

4.建设项目

这将TypeScript源代码编译为JavaScript build 目录。

bun run build

用法

HTTP模式

您可以使用以下命令运行HTTP服务器 npx:

npx lucide-icons-mcp

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

或全局安装：

npm install -g lucide-icons-mcp

然后运行：

lucide-icons-mcp

标准模式

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.标准模式

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

对于开发（使用Bun）：

bun run src/entry.ts --stdio

使用AI工具进行配置

示例：克劳德桌面

要在中使用此MCP服务器 克劳德桌面:

1. 打开您的Claude Desktop配置文件：

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

1. 将服务器添加到 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"]
    }
  }
}

1. 保存文件并重新启动Claude Desktop。
2. 现在，您应该可以在Claude的工具面板中看到“清晰图标”服务器。

可用工具（MCP）

此MCP服务器向AI编码助手公开以下工具。每个图标可以属于多个类别，提供灵活的搜索和发现功能。

1. 搜索图标

• 描述：按名称或类别搜索Lucide图标。返回图标及其完整的类别数组。
• 参数:

- query （string）：图标名称或类别的搜索词 - category （可选字符串）：按特定类别筛选 - limit （可选数字）：返回的最大结果

• 退货：图标阵列 name 和 categories （字符串数组）

2. 搜索_类别

• 描述：使用部分匹配按类别名称搜索图标类别
• 参数:

- query （string）：类别名称的搜索词 - limit （可选数字）：返回的最大结果

• 退货：类别数组 name 和 iconCount

3. 模糊_搜索_图标

• 描述：按图标名称从清醒状态模糊搜索图标
• 参数:

- query （string）：图标的搜索词 - limit （可选数字）：返回的最大结果

• 退货：图标阵列 name 和 categories （字符串数组）

4. 模糊_搜索_类别

• 描述：按类别名称模糊搜索图标类别
• 参数:

- query （string）：类别名称的搜索词 - limit （可选数字）：返回的最大结果

• 退货：类别数组 name 和 iconCount （字符串数组）

5. get_icon_usage_examples

• 描述：按确切名称获取Lucide React图标的使用示例
• 参数:

- name （string）：图标的搜索词

• 退货：特定Lucide图标的React/JSX使用示例

6. list_all_icons_by_category

• 描述：列出特定类别中的所有图标
• 参数:

- category （string）：列出图标的类别名称 - limit （可选数字）：返回的最大结果

7. list_all_类别

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

示例用法

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

      
    

  );
}

示例3：浏览类别

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

AI工具调用 search_categories:

{
  "query": "design"
}

然后打电话 list_icons_by_category":

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

图标类别

Lucide图标分为以下类别：

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

与检查员一起在本地测试MCP

您可以使用以下工具在本地测试MCP服务器 MCP检查员.

首先，确保项目建成：

bun run build

然后启动检查器：

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

这将打开检查器界面，用于对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：自动修复掉毛问题
• bun run crawl：抓取Lucide网站以更新图标数据
• bun run pre-build：抓取数据、构建图标元数据并修复linting

数据源

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

资源

• Lucide -图标库
• Lucide反应 -React实现
• 模型上下文协议 -MCP规范
• MCP TypeScript SDK -使用的SDK
• MCP检查员 -测试工具
• 包子 -JavaScript运行时

许可证

该项目根据MIT许可证获得许可。看 许可证 了解详情。

此项目引用Lucide的图标(https://lucide.dev/)，它们是 根据其许可 ISC许可证:

ISC许可证

Lucide的部分版权（c）由Cole Bemis持有2013-2022，作为其一部分 费瑟（麻省理工学院）。Lucide的所有其他版权（c）均由Lucide持有 2022年的贡献者。

使用、复制、修改和/或分发本软件的权限 特此授予收费或不收费的目的，前提是上述 版权声明和本许可声明出现在所有副本中。

软件按“原样”提供，作者不承担任何保证 关于本软件，包括所有隐含的适销性保证 以及健身。在任何情况下，作者均不对任何特殊的、直接的、， 间接或后果性损害或因以下原因造成的任何损害 使用、数据或利润的损失，无论是在合同、疏忽或 因使用或与之相关的其他侵权行为 该软件的性能。