YOGURT ICON / 開発者向け

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

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

v0.2.0 · stdio

クライアントに追加する

クライアントを選び、対応する設定をコピーします。現在のコンピューターのパスが設定済みです。

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

~/.codex/config.toml

TOML

[mcp_servers.yogurt-icon]
command = "node"
args = ["/absolute/path/to/yogurt-icon/mcp/server.mjs"]
startup_timeout_sec = 15
tool_timeout_sec = 30

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

ターミナル

SHELL

codex mcp add yogurt-icon -- 'node' '/absolute/path/to/yogurt-icon/mcp/server.mjs'

この設定は現在のコンピューター用です。ライブラリを移動したらパスを再生成してください。重複読み込みを避けるため、以前の設定は置き換えてください。

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

利用先プロジェクトの 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 が返したアイコンのみを使います。サーバーが利用できない場合は理由を説明し、無断で別のライブラリに切り替えないでください。