React Icons MCP Server

🚀 React 图标 MCP サーバー

React アイコンの統合のために設計された Model Context Protocol (MCP) サーバーです。このサーバーにより、Cursor、Windsurf、Cline などの AI コーディングツールが 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

✨ 主な機能

• react-icons で利用可能なすべてのアイコンライブラリの情報を取得する
• すべてのライブラリまたは特定のライブラリ内のアイコン名を検索する
• 特定のライブラリ内のすべてのアイコンを取得する
• 特定のアイコンの詳細情報を取得する
• さまざまな React コンテキストでアイコンを使用するサンプルコードを取得する

📚 ドキュメント

何が React アイコンですか？

React アイコン は、Font Awesome、Material Design、Bootstrap などの複数のアイコンコレクションからのアイコンを含む人気のあるライブラリです。ES6 インポートを使用して、React アプリケーションにアイコンを簡単に統合できます。

何が MCP ですか？

モデルコンテキストプロトコル は、AI ツールが主要なトレーニングデータ以外の特定のコンテキスト情報を要求するための標準です。この MCP サーバーにより、AI コーディングアシスタントは React アイコンの情報にアクセスし、より良いコーディング支援を提供できます。

利用可能なツール

この 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