React 图标 MCP 服务器

为 React 图标整合设计的 Model Context Protocol (MCP) 服务器。此服务器使 AI 编码工具（如 Cursor、Windsurf、Cline 等其他 AI 驱动的编码助手）能够访问和理解 React 图标库。

什么是 React 图标？

React 图标 是一个流行的库，包含来自多个图标集合（如 Font Awesome、Material Design、Bootstrap 等）的图标。它允许轻松将图标集成到 React 应用程序中，使用 ES6 导入。

什么是 MCP？

模型上下文协议 是一个标准，用于让 AI 工具请求其主要训练数据之外的特定上下文信息。此 MCP 服务器允许 AI 编码助手访问 React 图标的信息以提供更好的编码协助。

功能

• 获取所有可用在 react-icons 中的图标库信息
• 搜索所有库或特定库中的图标名称
• 获取特定库中的所有图标
• 获取特定图标的详细信息
• 获取在不同 React 上下文中使用图标的示例代码

快速开始

安装

npm install -g react-icons-mcp
# 或者
npx react-icons-mcp

配置

要将此 MCP 服务器与您的 AI 编码工具一起使用，您需要将其添加到工具的 MCP 配置中。以下是流行 AI 编码助手的示例：

MacOS / Linux

{
  "mcpServers": {
    "React 图标 MCP": {
      "command": "npx",
      "args": ["-y", "react-icons-mcp", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "React 图标 MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "react-icons-mcp", "--stdio"]
    }
  }
}

本地运行

您也可以直接运行服务器：

# 以 HTTP 模式运行（默认端口 3334）
npx react-icons-mcp

# 以 stdio 模式直接与 AI 工具集成运行
npx react-icons-mcp --stdio

# 在自定义端口上运行
npx react-icons-mcp --port 3456

可用工具

此 MCP 服务器为 AI 编码助手提供以下工具：

1. get_icon_libraries - 获取所有可用图标库的信息
2. search_icons - 搜索图标（按名称或类别）
3. get_library_icons - 获取特定库中的所有图标
4. get_icon_details - 获取特定图标的详细信息
5. get_icon_usage_examples - 获取在 React 上下文中使用图标的代码示例

示例用法

以下是 AI 工具如何利用此 MCP 服务器帮助开发者的示例：

1. 用户询问：“我需要为我的 React 应用创建一个用户图标”
2. AI 工具调用 search_icons 并传递查询“user”
3. AI 工具收到来自不同库的相关用户图标列表
4. AI 工具建议：“您可以使用 Font Awesome 的 FaUser 图标，例如：”

import { FaUser } from 'react-icons/fa';

function UserProfile() {
  return (
    <div>
      <FaUser size={24} />
      <span>用户资料</span>
    </div>
  );
}

开发

# 克隆仓库
git clone https://github.com/yourusername/react-icons-mcp.git
cd react-icons-mcp

# 安装依赖项
npm install

# 构建项目
npm run build

# 在开发模式下运行（带有热重载）
npm run dev

许可证

MIT