React Icons MCP Server

React Icons MCP 服务

用于集成 React Icons 的模型上下文协议（MCP）服务。此服务可让 Cursor、Windsurf、Cline 等 AI 编码工具及其他 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
# or
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"]
    }
  }
}

在本地运行

也可以直接运行此服务：

# Run in HTTP mode (default port 3334)
npx react-icons-mcp

# Run in stdio mode for direct integration with AI tools
npx react-icons-mcp --stdio

# Run on a custom port
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 Icons 的代码示例

使用示例

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

1. 用户提问：“我需要在 React 应用中使用一个用户图标。”
2. AI 工具使用查询词 “user” 调用 search_icons
3. AI 工具收到来自不同图标库的一系列用户相关图标
4. AI 工具建议：“你可以使用 Font Awesome 中的 FaUser 图标，代码片段如下：”

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

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

开发

# Clone the repository
git clone https://github.com/yourusername/react-icons-mcp.git
cd react-icons-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode with hot reloading
npm run dev

许可证

MIT