STARWARCLOUD STARWAR.AI
返回市场
羽翼图标MCP

羽翼图标MCP

作者：SeeYangZhi12 星标更新：2025-11-19
安装使用来源：spider==github.com

项目介绍

lucide-icons-mcp

Ask DeepWiki

<a href="https://glama.ai/mcp/servers/@SeeYangZhi/lucide-icons-mcp"> <img width="380" height="200" src="https://gips0.baidu.com/it/u=856282260,3150530202&fm=3081&app=3081&f=PNG?w=760&h=400" /> </a>

这是一个使用MCP（模型上下文协议）的服务器，它公开了Lucide React图标作为资源和工具，供LLM和代理应用程序使用。该服务器使用Bun和MCP TypeScript SDK构建。

Lucide是什么？

Lucide是一个由社区创建的美观且一致的图标工具包。它是一个开源图标库，提供了超过1,500个精心设计的图标，并采用单一、一致的风格。Lucide最初是从Feather Icons分叉出来的，现在已经成长为现代Web开发中最受欢迎的图标库之一。

MCP是什么？

MCP（模型上下文协议）是一种标准，允许AI工具从其主要训练数据之外的来源请求特定的上下文信息。

这个MCP服务器允许AI编码助手和其他代理应用程序访问关于Lucide React图标的详细信息，从而更好地帮助进行图标搜索、发现和实现。

特性

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

先决条件

开始使用（开发）

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源代码编译到build目录中的JavaScript文件中。

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
# 或者如果已全局安装
lucide-icons-mcp --stdio

本地开发

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

1. HTTP模式

适合支持HTTP通信的客户端。

对于开发（使用Bun）：

bun run start
# 或者直接
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
  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的工具面板中看到“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

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

示例用法

这里是如何一个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：自动修复检查问题
  • bun run crawl：爬取Lucide网站以更新图标数据
  • bun run pre-build：爬取数据，构建图标元数据并修复检查

数据来源

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

资源

许可证

本项目根据MIT许可证发布。详情见LICENSE。

本项目引用了来自Lucide (https://lucide.dev/)的图标，这些图标 根据其ISC许可证授权：

ISC许可证

版权（c）Lucide的部分内容由Cole Bemis于2013-2022年持有，作为Feather的一部分（MIT）。Lucide的所有其他版权（c）由Lucide贡献者于2022年持有。

在此授予任何人出于任何目的使用、复制、修改和/或分发此软件的权利，无论是否付费，前提是上述版权声明和本许可声明出现在所有副本中。

软件按“原样”提供，作者不对此软件做出任何明示或暗示的保证，包括但不限于适销性和适用性的默示保证。在任何情况下，作者都不应对因使用或执行此软件而引起的任何特殊、直接、间接或附带损害或任何形式的损害负责，无论是合同行为、疏忽或其他侵权行为。