MCP 服务器

React Icons MCP Server

anshuopinion

开发者工具

访问服务器

README

React Icons MCP 服务器

一个用于 React Icons 集成的模型上下文协议 (MCP) 服务器。该服务器使 AI 编码工具（如 Cursor、Windsurf、Cline 以及其他 AI 驱动的编码助手）能够访问和理解 React Icons 库。

什么是 React Icons？

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

什么是 MCP？

模型上下文协议是 AI 工具从其主要训练数据之外的来源请求特定上下文的标准。此 MCP 服务器允许 AI 编码助手访问有关 React Icons 的信息，从而提供更好的编码帮助。

功能

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

快速入门

安装

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

配置

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

MacOS / Linux

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

Windows

{
  "mcpServers": {
    "React Icons 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 编码助手公开以下工具：

get_icon_libraries - 获取有关所有可用图标库的信息
search_icons - 按名称或类别搜索图标
get_library_icons - 获取来自特定库的所有图标
get_icon_details - 获取有关特定图标的详细信息
get_icon_usage_examples - 获取使用 React Icons 的代码示例

使用示例

以下是 AI 工具如何使用此 MCP 服务器来帮助开发人员的示例：

用户提问：“我的 React 应用程序需要一个用户图标”
AI 工具使用查询“user”调用 search_icons
AI 工具收到来自各个库的与用户相关的图标列表
AI 工具建议：“您可以使用 Font Awesome 中的 FaUser 图标，代码片段如下：”

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

function UserProfile() {
  return (
    <div>
      <FaUser size={24} />
      <span>User Profile</span>
    </div>
  );
}

开发

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

# 安装依赖项
npm install

# 构建项目
npm run build

# 在开发模式下运行，并启用热重载
npm run dev