Phosphor Icons MCPサーバー

Phosphor Iconsへのアクセスを提供するModel Context Protocol (MCP) サーバーです。6種類のウェイトと1,000種類以上のアイコンを備えた柔軟なアイコンファミリーです。

重要: これはコミュニティ主導のAI支援型MCPサーバーであり、公式リポジトリではなく、Phosphor Iconsプロジェクトとは提携していません。このプロジェクトはAIの支援を受けて作成され、コミュニティによって保守されています。オリジナルのPhosphor Iconsプロジェクトは https://github.com/phosphor-icons で確認できます。

機能

• 🎨 6種類のアイコンウェイト: thin, light, regular, bold, fill, duotone

• 🌈 色のカスタマイズ: 任意の色（16進数、RGB、名前付きカラー、または currentColor）を適用可能

• 📏 サイズの制御: ピクセル単位でカスタムサイズを指定可能

• 🔍 アイコン検索: 名前、カテゴリ、タグでアイコンを検索

• 📦 バッチ操作: 複数のアイコンを一度に取得

• 📚 カタログアクセス: メタデータ付きですべての利用可能なアイコンを閲覧

• 🛠️ 実装ガイド: フレームワーク固有の統合ヘルプを取得

Related MCP server: Iconify MCP Server

インストール

npm install

CLI

このパッケージには、MCPを呼び出さずにSVG/PNGアセットをエクスポートするための phosphor-icons CLIが同梱されています。

ローカル開発の場合は、最初にビルドしてからコンパイル済みのCLIを実行してください：

npm run build
node dist/cli.js icon heart --weight bold --color "#ef4444" --size 32 --out heart.svg
node dist/cli.js icon house user gear --format png --size 24 --dir ./icons
node dist/cli.js search arrow --limit 5
node dist/cli.js categories

パッケージのインストール後、binコマンドを使用します：

phosphor-icons icon heart --size 16 --out heart.svg
phosphor-icons icon heart --format png --size 16 --out heart.png
phosphor-icons search arrow --limit 5
phosphor-icons categories

CLIコマンド：

• icon <name...>: 1つ以上のアイコンをSVGまたはPNGとして取得します。

• search <query>: アイコン名とバンドルされたメタデータを検索します。

• categories: バンドルされたカテゴリと例を一覧表示します。

• skill path: バンドルされたCodexスキルのディレクトリパスを表示します。

icon のフラグ：

• --weight, -w: thin, light, regular, bold, fill, または duotone。

• --color, -c: currentColor を含む任意のSVGカラー値。

• --size, -s: 幅と高さのピクセルサイズ。

• --format, -f: svg または png。

• --out, -o: 単一アイコンの出力ファイル。

• --dir, -d: バッチエクスポート用の出力ディレクトリ。

CLIは最初にインストールされた @phosphor-icons/core パッケージからアイコンを読み取ります。これにより、npm install 後はオフラインで高速かつ決定論的なアイコンエクスポートが維持されます。ローカルアセットが利用できない場合は、Phosphor Core GitHubのraw URLにフォールバックします。

CLIスモークテスト

npm install
npm run build
node dist/cli.js icon heart --size 16 --out live-heart.svg
node dist/cli.js icon heart --format png --size 16 --out live-heart.png
node dist/cli.js search arrow --limit 5

期待される結果：

• live-heart.svg に width="16" height="16" が含まれていること。

• live-heart.png がゼロ以外のファイルサイズで作成されること。

• 検索結果に矢印関連のアイコン名が返されること。

スキル拡張

このパッケージには skills/phosphor-icons/SKILL.md にCodex/Agentsスキルが含まれています。 パッケージのインストール後、以下で場所を確認してください：

phosphor-icons skill path

このスキルは、アイコンの検索、取得、エクスポート、およびフレームワーク実装に関する簡潔なルールをエージェントに提供します。 エージェントランタイムにスキルを登録する場合や、エージェントのスキルディレクトリにスキルをコピーする場合は、このパスを使用してください。

Vercel Skills CLIの互換性

このリポジトリはVercel Labsの skills CLI形式と互換性があります：スキルは skills/<name>/SKILL.md に配置され、ファイルは name と description のYAMLフロントマターで始まります。

このリポジトリのスキルを一覧表示：

npm run skills:list
# or
npx skills add . --list

ローカルチェックアウトからバンドルされたスキルをインストール：

npx skills add . --skill phosphor-icons --agent codex --copy -y

公開後にGitHubからインストール：

npx skills add lasaths/phosphor-icons-mcp --skill phosphor-icons --agent codex -y

スキルパスを解決してnpmパッケージのチェックアウトからインストール：

phosphor-icons skill path
npx skills add ./skills/phosphor-icons --agent codex --copy -y

開発

開発サーバーを実行：

npm run dev

これにより、ポート8081でサーバーが起動し、テスト用のSmitheryプレイグラウンドが開きます。

設定

サーバーはオプションの設定パラメータをサポートしています：

• defaultWeight: デフォルトのアイコンウェイトを設定します（thin, light, regular, bold, fill, duotone）。デフォルト: regular

ツール

get-icon

Phosphor Iconsライブラリから1つ以上のSVGアイコンを取得します。単一のアイコン名、またはバッチ取得用の名前の配列を指定します。

パラメータ：

• name (string, オプション): ケバブケースの単一アイコン名（例: 'arrow-left', 'user'）。単一アイコンに使用します。

• names (array, オプション): バッチ取得用のアイコン名の配列。複数のアイコンに使用します。

• weight (オプション): アイコンのウェイト/スタイル

• color (オプション): アイコンの色 - 16進数 (#FF0000)、RGB (rgb(255,0,0))、名前付きカラー (red)、または 'currentColor' を受け付けます

• size (オプション): アイコンのサイズ（ピクセル単位、幅と高さの両方を設定）

• format (オプション): 出力形式 (svg または png)。デフォルト: svg

• saveToFile (オプション): PNGファイルを保存するパス（単一アイコンのみ）

• saveDir (オプション): PNGファイルを保存するディレクトリ（複数アイコンのみ）

例：

get-icon name="heart" weight="bold" color="#FF0000"
get-icon names=["star", "heart"] weight="fill" color="gold" size=48
get-icon name="user" color="currentColor"

search-icons

名前、カテゴリ、またはタグでアイコンを検索します。

パラメータ：

• query (string): 検索語

• limit (オプション): 返す結果の最大数（デフォルト: 10）

例：

search-icons query="arrow" limit=5

list-categories

利用可能なすべてのアイコンカテゴリのリストを取得します。

リソース

phosphor://catalog

カテゴリ、タグ、利用可能なウェイトなどのメタデータを含む、人気のあるPhosphor Iconsの完全なカタログ。

phosphor://weights

利用可能な6つのアイコンウェイト/スタイルの詳細情報と、それぞれの最適な使用例。

プロンプト

implement-icon

プロジェクトにPhosphorアイコンを実装するためのガイダンスを取得します。

パラメータ：

• iconName (string): アイコンの名前

• framework (string): フロントエンドフレームワーク (html, react, vue, svelte, angular)

Smitheryへの公開

1. コードをGitHubにプッシュ

2. smithery.ai/new にアクセス

3. GitHubリポジトリを接続

4. 自動デプロイを設定

アイコンウェイト

• Thin: 繊細で最小限のストローク - 大きなサイズに最適

• Light: 微妙で洗練された外観 - モダンなデザイン

• Regular: バランスが取れており多用途 - 一般的な使用（デフォルト）

• Bold: 力強くインパクトがある - 強調や小さなサイズに

• Fill: ソリッドで塗りつぶされた形状 - 強い強調

• Duotone: 2トーンデザイン - 視覚的な面白さ

例

赤いハートのアイコンをボールドで取得：

// Returns SVG content for a bold red heart icon
get-icon({ name: "heart", weight: "bold", color: "#FF0000" })

青い星のアイコンをカスタムサイズで取得：

// Returns a 48px blue filled star icon
get-icon({ name: "star", weight: "fill", color: "#3B82F6", size: 48 })

ナビゲーションアイコンを検索：

// Returns list of icons related to navigation
search-icons({ query: "navigation", limit: 10 })

UI用に複数の色付きアイコンを取得：

// Get home, user, and settings icons all in blue
get-icon({ 
  names: ["home", "user", "gear"],
  weight: "regular",
  color: "#3B82F6",
  size: 24
})

免責事項

無保証および責任の制限

本ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定の目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行いません。いかなる場合においても、著作者または著作権者は、本ソフトウェアの使用またはその他の取り扱いから生じる、契約、不法行為、またはその他の行為にかかわらず、いかなる請求、損害、またはその他の責任に対しても一切の責任を負いません。

自己責任で使用すること

• これはAIの支援を受けて作成された非公式のコミュニティ主導プロジェクトです

• 本ソフトウェアは、いかなる保証やサポートもなしに提供されます

• ユーザーは、自身のユースケースに対してソフトウェアをテストおよび検証する責任を負います

• 管理者は、本ソフトウェアの使用から生じるいかなる損害、データ損失、または問題に対しても責任を負いません

• このプロジェクトは、公式のPhosphor Iconsプロジェクトによって承認または提携されていません

ライセンス

このMCPサーバーはMITライセンスです。Phosphor IconsもMITライセンスです。

リンク

• 🌐 Phosphor Icons ウェブサイト

• 💻 オリジナルのPhosphor Iconsリポジトリ (公式)

• 📦 Phosphor Icons Core

• 📖 Smithery ドキュメント

• 🔧 MCP プロトコル

クレジット

• アイコン: Phosphor Icons が提供 - Tobias Fried 作

• MCPサーバー: AIの支援を受けて作成されたコミュニティ主導プロジェクト

• 管理者: コミュニティの貢献者（Phosphor Iconsとは提携していません）