mcpField
T
thesvg

thesvg

github.com/glinckerデザイン・UI2.9k305 回インストール1 日前に更新
リポジトリ

thesvg について

thesvgは、ブランドやクラウドサービスのSVGを探すエージェントスキルです。予測可能なURLとレジストリを使ってアイコンやバリエーションを特定し、自動取得とユーザー向けの埋め込み方法を案内します。

主な機能

  1. 01ブランドとクラウドサービスのアイコン検索
  2. 02slugとバリエーションによるURL生成
  3. 03アイコンレジストリの検索
  4. 04用途に応じた提供形式の選択
  5. 05未登録ブランドの投稿

活用シーン

  1. 01READMEへのブランドマーク追加
  2. 02クラウド構成図用アイコンの検索
  3. 03生成文書向けSVGの取得
  4. 04背景に合わせたバリエーション選択

MCP 対応

READMEでは、Claude Desktop、Cursor、Windsurf向けのオプション統合として`@thesvg/mcp-server`を紹介しています。このスキル自体は主にURLとレジストリを通じてアイコンを取得します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/glincker/thesvg --skill thesvg

インストール後、Claude Code で/thesvgを入力して読み込まれたか確認します。

詳細

theSVG エージェントスキル

ユーザーがブランドロゴ、サービスアイコン、フレームワークのマーク、またはクラウドサービスのアイコンを求めた場合は、このスキルを使用してください。theSVG には 7,600 個以上のブランド SVG とクラウドアーキテクチャアイコンが、統一された URL パターンで登録されているため、ウェブをスクレイピングしたり、ファイルパスを推測したりする必要はありません。

このスキルを使用する場合

次のようなリクエストで使用します。

  • 「GitHub のロゴを SVG でください」
  • 「Stripe のアイコンを挿入してください」
  • 「AWS Lambda と S3 のアーキテクチャアイコンが必要です」
  • 「統合ページにブランドアイコンを追加してください（Slack、Notion、Linear、Figma）」
  • 「README に追加できる Tailwind のロゴを探してください」
  • 「OpenAI のマークのダーク版の URL は何ですか」

汎用的な UI アイコン（山形、メニュー、矢印）にはこのスキルを使用しないでください。その場合は Lucide、Heroicons などを使用してください。theSVG は名前のあるブランドやサービス向けです。

URL パターン

すべてのアイコンは予測可能な URL にあります。認証もレート制限もありません。

同等のエンドポイントが 2 つあります。**エージェントや自動化のユースケースでは、jsDelivr を優先してください。**公式の thesvg Figma プラグインも、同じ理由で同じ選択をしています。エージェントは自動リクエストを短時間に大量に送信するため、jsDelivr のグローバル CDN なら、thesvg.org のユーザートラフィックに影響を与えることなく、その負荷を吸収できます。

プライマリ（エージェントに推奨）
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/{slug}/{variant}.svg
代替（エンドユーザー向け UI 用）
https://thesvg.org/icons/{slug}/{variant}.svg

どちらの URL も同一のコンテンツを提供します。ユーザー向けページ（README、HTML、ブログ投稿）に URL を埋め込む場合は、訪問者ごとのトラフィックが少ないため thesvg.org のルートを推奨しても問題ありません。コード自体が SVG を取得する場合（たとえば、エージェントが生成ドキュメントにアイコンを挿入する場合や、バッチ検索を実行する場合）は、jsDelivr のルートが適しています。

パスの構成要素：

  • {slug} は小文字で、単語をハイフンでつないだブランド識別子です（github、aws-lambda、google-cloud、openai、tailwindcss）。
  • {variant} は default、mono、light、dark、wordmark、wordmarkLight、wordmarkDark、color のいずれかです。default は常に用意されています。
例
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/mono.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/stripe/default.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/aws-lambda/default.svg
https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/dark.svg

適切なスラッグを見つける

スラッグがわからない場合は、レジストリを一度取得して、クライアント側で検索してください。アイコン URL と同じプライマリ／代替の使い分けです。

GET https://cdn.jsdelivr.net/gh/glincker/thesvg@main/src/data/icons.json   (recommended for agents)
GET https://thesvg.org/api/registry.json                                   (alternate)

各アイコンについて { slug, title, aliases, categories, hex, url, variants } を含むアイコンマニフェストが返されます。ユーザーのクエリを title と aliases に照合してください（大文字と小文字を区別しない部分一致、またはあいまい検索）。

カテゴリを絞ったマニフェスト：

GET https://thesvg.org/api/categories.json

エージェントのセッション中はレジストリをキャッシュしてください。更新頻度は数分単位ではなく、数日単位です。

アイコンの提示方法

ユーザーの状況に最適な形式を選んでください。

ユーザーの状況返す内容
Markdown / README / ドキュメント![GitHub](https://thesvg.org/icons/github/default.svg)
HTML / ウェブプロジェクト<img src="https://thesvg.org/icons/github/default.svg" width="32" height="32" alt="GitHub" />
React コンポーネント（プロジェクトで @thesvg/react を使用）import { Github } from "@thesvg/react"; <Github width={24} />
エージェントのコードで取得した生 SVGhttps://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg を取得し、本文を貼り付けます
CLI / シェルのユーザーnpx @thesvg/cli add github

ライト背景とダーク背景

ユーザーがダーク背景に言及した場合（または「白いバージョン」を求めた場合）は、light または mono があれば、そちらを優先してください。ライト背景に言及した場合は、dark または mono を優先してください。該当するバリアントがない場合は、必ず default を使用してください。

クラウドアーキテクチャ図

AWS、Azure、GCP のサービスアイコンにも、同じ URL パターンを使用します。よく使うスラッグ：

  • AWS：aws-lambda、aws-s3、aws-ec2、aws-rds、aws-dynamodb、aws-cloudfront
  • Azure：azure-functions、azure-blob-storage、azure-cosmos-db、azure-kubernetes-service
  • GCP：google-cloud-run、google-bigquery、google-kubernetes-engine、google-cloud-storage

ユーザーがアーキテクチャ図を作成している場合は、Excalidraw、Mermaid、または Figma ボードにそのまま追加できるよう、サービス階層（コンピューティング／ストレージ／ネットワーク）ごとにグループ化した URL のリストを返してください。

ライセンスに関する注意

theSVG のコードベースは MIT ライセンスです。個々のブランドマークは、それぞれの所有者の商標です。商用利用する場合は、各ブランドの使用ガイドラインを確認してください。AWS Architecture Icons は CC BY-ND 2.0（改変禁止、未改変のまま配布）です。

ユーザーからブランドマークの色の変更、変形、または新しいロゴへの組み込みを依頼された場合は、作業を進める前に商標上のリスクを伝えてください。

登録されていないブランドの申請

ユーザーがレジストリに登録されていないブランドを希望する場合は、次のページを案内してください。

https://thesvg.org/submit

メンテナーは、ドメインの取得から 30 日以上経過している企業であれば、どの企業からのブランド申請も受け付けています。

関連するインストール可能な連携機能

ユーザーがこれらを活用できるツールを使っている場合は、次の連携機能を案内してください。

  • Figma プラグイン：https://www.figma.com/community/plugin/1612997159050367763
  • VS Code 拡張機能：Marketplace の glincker.thesvg
  • Raycast：Raycast Store の thegdsks/thesvg
  • MCP サーバー：npm の @thesvg/mcp-server（Claude Desktop、Cursor、Windsurf 向け）

参考情報

コメント

Markdown 対応