使用说明

Lucide Icons MCP服务器

Lucide Icons的MCP服务器——从任何AI编码助手中搜索文档、道具和代码示例

概述

清晰图标mcp服务器 是一个模型上下文协议（MCP）为AI编码助手提供即时访问的服务器 Lucide 图标文档。它使GitHub Copilot、Claude、Cursor等工具能够搜索图标、查找SVG内容和检索特定于框架的代码示例，而无需离开编辑器。

明亮的是一个美丽而一致的图标工具包，从Feather Icons分叉而来。每个主要框架都有1700多个图标和包，它是最受欢迎的开源图标库之一。

┌─────────────────┐     ┌────────────┐     ┌─────────────────────────┐     ┌────────────────┐
│  AI Assistant    │────▶│ MCP Client │────▶│ lucide-icons-mcp-server │────▶│ Knowledge Base │
│ (Copilot/Claude) │◀────│            │◀────│                         │◀────│ (1,700+ icons) │
└─────────────────┘     └────────────┘     └─────────────────────────┘     └────────────────┘

可用工具

工具	说明	参数
`lucide_search`	搜索图标文档	`query` （必填）， `category`, `limit`
`lucide_get_icon`	使用SVG和props获取完整的图标文档	`name` （必填）
`lucide_get_examples`	获取图标的代码示例	`name` （必填）， `package`
`lucide_list_icons`	列出所有图标，可选择按类别列出	`category`
`lucide_list_categories`	列出所有可用的图标类别	--
`lucide_get_package_info`	获取软件包的安装和使用指南	`package` （必填）

分类

图标分为： accessibility, account, animals, arrows, brands, buildings, charts, communication, connectivity, cursors, design, development, devices, emoji, files, finance, food-beverage, gaming, home, layout, mail, math, medical, multimedia, nature, navigation, notifications, people, photography, science, seasons, security, shapes, shopping, social, sports, sustainability, text, time, tools, transportation, travel, weather

支持的软件包

包	框架
`lucide`	香草JS
`lucide-react`	反应
`lucide-vue-next`	视图3
`lucide-angular`	角度
`@lucide/svelte`	Svelte 5
`lucide-svelte`	Svelte 4
`lucide-solid`	SolidJS
`lucide-preact`	前言
`lucide-react-native`	React Native
`lucide-static`	静态/CSS
`@lucide/astro` 星的

快速开始

npx lucide-icons-mcp-server

配置

VS代码（GitHub副本）

添加 .vscode/mcp.json:

{
  "servers": {
    "lucide-icons": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "lucide-icons-mcp-server"]
    }
  }
}

克劳德桌面版

添加 claude_desktop_config.json:

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

光标

添加 .cursor/mcp.json:

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

帆板运动

添加 ~/.codeium/windsurf/mcp_config.json:

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

Amazon Q开发者命令行界面

添加 ~/.aws/amazonq/mcp.json:

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

泽德

添加 settings.json:

{
  "context_servers": {
    "lucide-icons": {
      "command": {
        "path": "npx",
        "args": ["-y", "lucide-icons-mcp-server"]
      }
    }
  }
}

JetBrains集成开发环境（IntelliJ、WebStorm等）

首选 设置→ 工具→ AI助手→ MCP服务器
点击添加
将命令设置为 npx 有争论 ["-y", "lucide-icons-mcp-server"]

克莱恩

添加 cline_mcp_settings.json:

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

发展

先决条件

Node.js>=20
npm

设置

git clone https://github.com/matracey/lucide-icons-mcp-server.git
cd lucide-icons-mcp-server
npm install

构建

npm run build

测试

npm test                # Run tests
npm run test:watch      # Watch mode
npm run test:coverage   # With coverage report

在本地运行

npm run dev    # Watch mode with tsx
npm start      # Run built version

重新生成知识库

知识库由以下内容生成明亮的 API和清晰图标/清晰 GitHub存储库：

npm run generate

这将从Lucide API获取图标元数据(/api/categories, /api/tags)，从GitHub下载SVG内容，并将结果输出到 src/data/generated/.

运作原理

建筑

服务器使用 MCP-SDK 通过stdio传输公开6个工具。当人工智能助手连接时，它可以调用这些工具来查询1700多个Lucide图标的预构建知识库。

知识库生成

这 scripts/generate-knowledge-base.ts 脚本：

从以下位置获取图标类别 https://lucide.dev/api/categories
从以下位置获取图标标签 https://lucide.dev/api/tags
从下载每个图标的SVG内容 lucide-icons/lucide GitHub仓库
从模板生成所有11个框架包的代码示例
输出结构化JSON文件(src/data/generated/icons.json)

搜索评分

搜索引擎使用基于令牌的评分系统：

比赛类型	得分
精确名称/匹配符	+100
名称/段符包含查询	+50
名称/段符包含标记	+30
标签完全匹配	+20
标签包含标记	+10
类别匹配标记	+15

结果按分数排序，并返回到指定的限制（默认值10，最大值20）。

项目结构

src/
├── index.ts          # Entry point — stdio transport setup
├── server.ts         # MCP server & tool definitions
├── types.ts          # TypeScript interfaces
├── constants.ts      # Package definitions, categories, URLs
├── search.ts         # Fuzzy search logic
├── formatters.ts     # Markdown output formatters
├── data/generated/   # Generated icon knowledge base
└── __tests__/        # Tests (vitest)
scripts/
└── generate-knowledge-base.ts  # Data generation script

贡献

欢迎投稿！请参阅贡献.md 作为指导方针。

打开一个问题对于bug或功能请求
提交带有更改的拉取请求

许可证

麻省理工学院——见许可证了解详情。