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 所有。

特此授予任何獲得本軟件副本和相關文檔文件（“軟件”）的人免費使用、複製、修改和/或分發本軟件的權利，無論出於何種目的，前提是上述版權聲明和本許可聲明出現在所有副本中。

軟件按“原樣”提供，作者對本軟件不承擔任何形式的保證，包括所有隱含的適銷性和適用性保證。在任何情況下，作者均不對因使用、數據丟失或利潤損失而導致的任何特殊、直接、間接或後果性損害或任何損害承擔責任，無論該損害是因合同行為、疏忽或其他侵權行為引起的，還是與本軟件的使用或性能有關。