pheralb/svgl

これは何？

主な機能

• 01ライト版・ダーク版やワードマークを含むSVGロゴを閲覧できるギャラリー。
• 02ロゴライブラリを検索できる公開API。
• 03Raycast、VS Code、Figma、PowerToysなどに対応するコミュニティ製拡張機能。
• 04React、Vue、Svelteでロゴを利用するためのnpmパッケージ。
• 05SVGファイルとデータ項目を追加し、プルリクエストで貢献できる仕組み。

ユースケース

• Webサイト、スライド資料、デザインモックアップ用のブランドロゴを探す。
• npmパッケージを使って、React、Vue、Svelteのプロジェクトにロゴを取り込む。
• エディターを離れずに、Raycast、PowerToys、VS Codeからロゴを検索してコピーする。

クイックスタート

1. 1

   Node.js 20 以降と Git をインストールする

2. 2

   リポジトリをフォークして、ローカルにクローンする

   git clone git@github.com:your_username/svgl.git
3. 3

   必要に応じて pnpm をグローバルにインストールする

   npm install -g pnpm
4. 4

   プロジェクトの依存関係をインストールする

   pnpm install

使う前に知っておきたいこと

• !ロゴライブラリにコントリビュートする場合は、各 SVG の使用権限があることを確認してください。

トピック

よくある質問

svgl とは？

SvelteKitとTailwind CSSで構築された、WebギャラリーとAPIを備えるSVGブランドロゴライブラリ。 SVGLは、企業、製品、オープンソースプロジェクトのSVGロゴを集めたライブラリで、svgl.appのWebギャラリーから閲覧できます。各ロゴはリポジトリ内にSVGファイルとして保存され、TypeScriptのデータファイルに登録されています。このデータにはタイトル、カテゴリ、Webサイトに加え、任意でワードマークやライト版・ダーク版の情報が含まれます。

svgl は無料で使えますか？ライセンスは？

svgl は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

svgl は今もメンテナンスされていますか？

活発にメンテナンス中。svgl の最終コミットは 2026年10月28日 です。

svgl は何に使えますか？

Webサイト、スライド資料、デザインモックアップ用のブランドロゴを探す。 npmパッケージを使って、React、Vue、Svelteのプロジェクトにロゴを取り込む。 エディターを離れずに、Raycast、PowerToys、VS Codeからロゴを検索してコピーする。

svgl のインストール方法は？

Node.js 20 以降と Git をインストールする リポジトリをフォークして、ローカルにクローンする: git clone git@github.com:your_username/svgl.git 必要に応じて pnpm をグローバルにインストールする: npm install -g pnpm プロジェクトの依存関係をインストールする: pnpm install

svgl はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pheralb/svgl