brand-logos

SVGL ブランドロゴ

SVGL は、最適化されたクリーンな SVG として提供されるブランド／製品／ツールのロゴライブラリです。認証不要の無料 REST API（https://api.svgl.app）と、ロゴを React コンポーネントとしてインストールできる shadcn 互換レジストリを提供します。マークアップが一貫しており、メンテナンスされているため、ロゴの SVG を手書きしたり、ウェブから適当なファイルを取得したりする代わりに利用してください。

このスキルを使う場面

SVGL の名前が挙がっていなくても、ブランド、製品、会社、ツールのロゴを探す、ダウンロードする、追加する、埋め込む、またはインストールする依頼があれば、このスキルを使ってください。よくある表現：「X のロゴを追加して」「X の SVG アイコンが必要です」「ここに連携サービスのロゴを並べて」「Y のダークモード版のロゴを取得して」「Z のロゴをコンポーネントとしてインストールして」。

このスキルの対象は、よく知られたブランド／製品のロゴです。一般的な UI アイコン（Lucide／Heroicons のようなアイコンセットを使用してください）、イラスト、または公開ライブラリにない会社独自のカスタムロゴには使用しないでください。

アプリの UI にソーシャルアイコン（例：共有ボタン、プロフィールリンク、フッターのソーシャルリンク一覧）を使う場合、プロジェクトに既存の共有アイコンレジストリがあれば、それを優先してください。SVGL から取得して別のロゴソースを作るのではなく、既存のものを再利用してください。そのようなレジストリがない場合、または必要なマークが登録されていない場合に限り、SVGL を使用してください。

アプローチの選択

ユーザーが何を構築しているかに応じて、2 つのワークフローから選択してください。

• REST API（生の SVG をダウンロード） — デフォルトです。ユーザーがディスク上の .svg ファイル、インライン SVG マークアップ、または React 以外のスタック（プレーンな HTML、Vue、Svelte、Astro、メール、デザインファイル）向けのロゴを求める場合に使用してください。簡単な検索や「SVGL に X はありますか？」という質問にも使用してください。
• shadcn レジストリ（React コンポーネントとしてインストール） — プロジェクトがすでに React + shadcn を使用しており（components.json がある）、ユーザーが静的ファイルではなく再利用可能なコンポーネントを求めている場合に限り使用してください。プロジェクトで何が使われているか不明な場合は、決めつける前に components.json とフレームワークを確認してください。「SVGL CLI」という依頼はこのフローを意味します（SVGL 独自の CLI はなく、SVGL のレジストリに対して shadcn CLI を使用します）。

REST API ワークフロー

ベース URL：https://api.svgl.app。生の SVG エンドポイントを除き、すべてのレスポンスは JSON です。

各ロゴのエントリは次のようになります（route と wordmark は URL 文字列 1 つの場合と { light, dark } オブジェクトの場合があり、category は文字列または配列の場合があります）。

{
  "id": 573,
  "title": "GitHub",
  "category": "Software",
  "route": {
    "light": "https://svgl.app/library/github_light.svg",
    "dark": "https://svgl.app/library/github_dark.svg"
  },
  "wordmark": {
    "light": "https://svgl.app/library/github_wordmark_light.svg",
    "dark": "https://svgl.app/library/github_wordmark_dark.svg"
  },
  "url": "https://github.com/",
  "brandUrl": "https://brand.github.com/"
}

エンドポイント

目的	リクエスト
タイトルで検索	GET https://api.svgl.app?search=<query>
カテゴリを一覧表示	GET https://api.svgl.app/category/<category> （例：software）
カテゴリを確認	GET https://api.svgl.app/categories
すべてのロゴ（上限の指定は任意）	GET https://api.svgl.app?limit=<n>
最適化済み SVG マークアップ	GET https://api.svgl.app/svg/<name>.svg
未最適化 SVG マークアップ	GET https://api.svgl.app/svg/<name>.svg?no-optimize

/svg/ エンドポイントの <name> は、route URL からパスと拡張子のプレフィックスを除いたファイル名です。たとえば、ルート https://svgl.app/library/github_light.svg は /svg/github_light.svg に対応します。最適化済みのバージョン（svgo で処理されたもの）がほとんどの場合に適しています。?no-optimize は、元のマークアップが必要な場合（例：ソースファイルとの差分を確認する場合や、特定の構造を保持する場合）に限り使用してください。

手順

1. 検索するには、ブランド名を使います：curl -s "https://api.svgl.app?search=stripe"。何も返されない場合は、短い名前や別の表記を試すか、該当しそうなカテゴリを一覧表示して探します。
2. 適切なバリアントを選択します：
   • route が通常の文字列なら、共通のロゴが 1 つだけあります。それを使います。
   • route が { light, dark } の場合は、表示先に合わせて選びます：dark バリアントは暗い背景（明るいアートワーク）用、light バリアントは明るい背景用です。アプリが両方のテーマに対応している場合は、両方を取得して CSS で切り替えます。決めつけず、表示先の背景に合わせてください。
   • ユーザーが会社名入りのロゴ（ワードマーク／ロックアップ）を明示的に求めている場合に限り、wordmark を使います。単に「ロゴ」と言われた場合は、route（アイコンマーク）を優先します。
3. ダウンロードする SVG は、新しいフォルダーを独自に作るのではなく、プロジェクトで既に使われているアセットの保存先に置きます。他のロゴやアイコンがある場所（例：public/、public/logos/、src/assets/、app/assets/icons/、static/）を確認し、既存の命名規則に合わせます。
4. 保存した内容と保存先を確認して伝えます。ライト版とダーク版の両方を保存した場合は、その旨も伝えます。

例 — GitHub アイコン（ライト版とダーク版）を既存のアセットディレクトリにダウンロードする場合：

curl -s -o public/logos/github-light.svg "https://api.svgl.app/svg/github_light.svg"
curl -s -o public/logos/github-dark.svg  "https://api.svgl.app/svg/github_dark.svg"

インラインで使いたい場合（例：コンポーネントに貼り付ける場合）は、マークアップを取得して直接埋め込み、ファイルには保存しません。

curl -s "https://api.svgl.app/svg/stripe.svg"

shadcn レジストリのワークフロー

SVGL に独自の CLI はありません。ユーザーが「SVGL CLI」「svgl cli」「SVGL CLI 経由でインストール」と尋ねた場合は、SVGL のレジストリを指定して標準の shadcn CLI を実行する、このフローを指しています。別の svgl コマンドは探さず、ここで案内してください。

shadcn を導入済みの React プロジェクトでは、ロゴを型付きコンポーネントとしてインストールできます。プロジェクトで既に使われているパッケージマネージャーを確認し（pnpm-lock.yaml、package-lock.json、yarn.lock、bun.lockb を確認して合わせます。新しいものは導入しません）、インストールコマンドを実行します：

pnpm dlx shadcn@latest add @svgl/github
# npm:  npx shadcn@latest add @svgl/github
# yarn: yarn dlx shadcn@latest add @svgl/github
# bun:  bunx shadcn@latest add @svgl/github

@svgl/... 名前空間はそのまま解決されます。現在の shadcn のバージョンでは、プロジェクト設定を追加しなくても https://svgl.app/r/<name>.json から取得できます。これにより、標準の SVGProps を受け取る React コンポーネント（例：GithubLight コンポーネント）が生成され、他のコンポーネントと同様にサイズやスタイルを調整できます。コンポーネント名は、API で使われているロゴ名に対応しています。

代替手段： CLI が @svgl 名前空間を解決できない場合（例：古い shadcn バージョン）のみ、components.json に明示的に登録してから、もう一度実行します：

{
  "registries": {
    "@svgl": "https://svgl.app/r/{name}.json"
  }
}

注意事項

• レート制限。 API は認証不要で公開されていますが、悪用防止のためレート制限があります。何百ものロゴをループ処理したり、繰り返しポーリングしたりしないでください。検索は一度だけ行い、必要な SVG のみ取得して、再ダウンロードする代わりにローカルに保存してキャッシュしてください。
• ブランド使用権。 SVGL は利便性のためにロゴを配布していますが、商標やブランドガイドラインのルールは引き続き適用されます。ブランド所有者のガイドライン（各エントリの brandUrl／url がリンク先になっていることがよくあります）に従い、ユーザーが持っていない推奨や提携を示唆するような、色の変更、変形、誤認を招く表示は避けてください。
• SVGL を複製しないでください。 SVGL の利用規約によると、API はコミュニティに役立つ拡張機能、プラグイン、ツール向けのものであり、競合するロゴライブラリを作るためにカタログをスクレイピングする用途ではありません。

出力

取得またはインストール後、次の内容をユーザーに簡潔に伝えます：

• 使用したロゴとバリアント（アイコン／ワードマーク、ライト／ダーク）。
• ファイルの保存先、またはインストールしたコンポーネント。
• ユーザー側で対応が必要な事項（テーマ切り替えの実装、目立つ用途やマーケティング用途でのブランドガイドラインの確認など）。