SVG Nexus / DEVELOPERS
登録不要 | 100%ブラウザ完結処理
開発者向けドキュメント
開発者とデザイナーのためのベクターと3Dアイコンライブラリ
76,166 点のカタログ、JSON 検索 API、依存なしのコンポーネントを React、Next.js、Vue 3、Svelte、Tailwind CSS、PHP のプロジェクトに追加できます。
1. JSON 検索とファセット API (GET /api/icons)
キーワード、ライブラリフォルダー、カテゴリ、スタイル、ライセンスで絞り込めます。応答は安全なインライン SVG、候補、一致するファセット付きのページ分割されたアイコンを返します。
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. ベクターファイルの直接 URL
# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg
# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg
# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt
3. 依存なしコンポーネントの型
import * as React from 'react';
export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);
}
実践的なSVGガイド&チュートリアル
SVGとPNGの違い:どちらを使うべき?
Webサイトのアイコンやロゴ、UIには、どんな画面サイズでもくっきり表示されるSVGを使用してください。メール署名やSNS用サムネイルなど固定ピクセル画像が必要な場合はPNGを使用します。
CSSでSVGアイコンをアニメーションさせる方法
インラインSVGにCSSクラスを追加し、stroke-dasharrayのkeyframesでHover色変化や読み込みアニメーションを定義します。
FigmaやブラウザでSVGアイコンを編集する方法
SVG NexusからSVGコードをコピーしてFigmaやIllustratorに直接貼り付けるか、ブラウザ上のベクタースタジオを開いてソフト不要で編集できます。
React、Next.js、VueでSVGアイコンを使う方法
アイコンページのReact TSXまたはVue 3タブを選択し、currentColorとTailwind CSSに対応したコンポーネントコードをコピーします。