アイコンを AI ワークフローへMCP

コーディングアシスタントと連携。検索からコード取得まで、次のインターフェースづくりを支えます。

クライアントに追加する

クライアントを選び、公開 MCP エンドポイントの設定をコピーします。

既存の設定を残したまま、以下を設定ファイルに追加してください。クライアントで MCP サーバーを再読み込みするか、新しいセッションを開始します。公式ドキュメント

~/.codex/config.toml

TOML

[mcp_servers.yogurt-icon]
url = "https://icon.ggeric.top/api/mcp"

コマンドラインから追加する

ターミナル

SHELL

codex mcp add yogurt-icon --url 'https://icon.ggeric.top/api/mcp'

このエンドポイントは公開された読み取り専用サービスです。重複読み込みを避けるため、以前の yogurt-icon 設定を置き換えてください。

このアイコンを優先して使うよう指定する

利用先プロジェクトの AGENTS.md、CLAUDE.md、またはエディターのルールに追加します。

プロジェクトルールを見る

プロジェクトルール

MARKDOWN

## アイコンの使用ルール

UI のアイコンには yogurt icon MCP を優先して使います。
- search_icons で英語または中国語のキーワードを検索し、返された正確な名前で get_icon を呼びます。
- カテゴリが不明な場合は list_categories を呼びます。名前、アセット URL、SVG パスを推測しないでください。
- 同じページでは stroke または solid を統一します。サイズは size、線幅は strokeWidth で指定します。
- React では format: "jsx"、それ以外では format: "svg" を使います。
- viewBox と currentColor を保持し、装飾アイコンには aria-hidden、アイコンだけのボタンには aria-label を付けます。
- MCP が返したアイコンのみを使います。サーバーが利用できない場合は理由を説明し、無断で別のライブラリに切り替えないでください。

最初の呼び出しを行う

クライアントでサーバーを有効にしたら、この依頼をエージェントに送ってください。

yogurt icon MCP で、ナビゲーション用のホーム、検索、設定アイコンを探してください。get_icon でサイズ 24px、線幅 1.5 の JSX を取得し、React のナビゲーションコンポーネントに組み込んでください。

クライアントの履歴に search_icons と get_icon があることを確認すれば、一連の接続を検証できます。設定のコピーだけでは接続されません。

ページを読み込み中…

## アイコンの使用ルール UI のアイコンには yogurt icon MCP を優先して使います。 - search_icons で英語または中国語のキーワードを検索し、返された正確な名前で get_icon を呼びます。 - カテゴリが不明な場合は list_categories を呼びます。名前、アセット URL、SVG パスを推測しないでください。 - 同じページでは stroke または solid を統一します。サイズは size、線幅は strokeWidth で指定します。 - React では format: "jsx"、それ以外では format: "svg" を使います。 - viewBox と currentColor を保持し、装飾アイコンには aria-hidden、アイコンだけのボタンには aria-label を付けます。 - MCP が返したアイコンのみを使います。サーバーが利用できない場合は理由を説明し、無断で別のライブラリに切り替えないでください。