mcpField
P
pickapicon-mcp

pickapicon-mcp

ローカル
github.com/Leee62メディア・デザイン474 週間前に更新
リポジトリ

pickapicon-mcp について

pickapicon-mcpは、SVGアイコンを必要とするフロントエンド開発者やUIデザイナー向けのMCPサーバーです。Iconify APIを使い、説明からアイコンを検索してSVGコードを取得できます。

主な機能

  1. 01Iconifyのアイコンリポジトリ一覧
  2. 02説明とプレフィックスによるアイコン検索
  3. 03名前とプレフィックスによるSVG詳細の取得

活用シーン

  1. 01コンポーネントやページ用のSVGアイコン探し
  2. 02選んだアイコンのSVGコード取得
  3. 03モダンなデザインカラーのアイコン検索

MCP 対応

Iconifyリポジトリの一覧、アイコン検索、名前とプレフィックスを指定したSVGコード取得のツールを提供します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "pickapicon": {
      "command": "npx",
      "args": [
        "-y",
        "pickapicon-mcp"
      ],
      "env": {
        "PREFIX": "<PREFIX>"
      }
    }
  }
}
起動コマンドnpx -y pickapicon-mcp
設定が必要な環境変数
PREFIX

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmpickapicon-mcp

ツール

3

掲載時のツール一覧 · 3 週間前に更新

このツールにパラメーターはありません。

詳細

pickapicon-mcp

logo

smithery badge 中文文档 English

説明

これは、Iconify API を使って SVG を取得する、FE／UI／デザイナー向けの MCP です。

pickapicon-mcp を使えば、ウェブサイトにアクセスして SVG を探し、手作業でコピーする代わりに、必要なものを LLM に尋ねるだけで取得できます。

SVG を取得するワークフローを簡素化し、MCP と LLM で楽しく作業できます 😎。

👉👉 アイコンリポジトリのウェブサイト Iconify 👈👈

ツール

  • get_icon_repos

    • すべてのリポジトリ名を取得します。他のツールのパラメーター <prefix> に使用します。

  • get_icons_by_desc_and_prefix

    • 欲しいアイコンの説明とプレフィックスを入力して、アイコンを取得します。
    • 入力：
      • desc：欲しいアイコンの説明
      • prefix?：プレフィックス

  • get_icon_detail_by_prefix_and_name

    • プレフィックスと SVG 名を指定して、アイコンの詳細（SVG コード）を取得します。
    • 入力：
      • svg_name：SVG 名
      • prefix?：プレフィックス

クイックスタート

Smithery 経由でインストール

Smithery を使って、Pickapicon MCP を Claude Desktop に自動でインストールします。

npx -y @smithery/cli install @Leee62/pickapicon-mcp --client claude

これは MCP サーバーの設定です。

  "mcpServers": {
    "pickapicon-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "pickapicon-mcp@latest"
      ],
      "env": {
        "PREFIX": "<LIKE ant-design>"
      }
    }
  }

使用例

  • COMPONENT／PAGE に関する SVG をすばやく取得 case2
  • モダンなデザインカラーの SVG を取得 case1

ライセンス

MIT

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。