静的 SVG
kubai-icons-static は、各アイコンを単体で完結した SVG ファイルとして提供します。色はファイルに書き込まれているため、スクリプトもスタイルシートも不要です。
インストール
bash
npm install kubai-icons-staticファイル
svg/ には、デフォルトのブルー (#5393FF) の全アイコンが入っています。svg-soft/ には、ブルーグレーのソフトバリエーションの全アイコンが入っています。
ドロップシャドウ用の余白が各ファイルに含まれています。24px で表示するアニメーションアイコンと同じ大きさにするには、ファイルを 28px で表示してください。ファイル内の各 id にはアイコン名が含まれるため、1 つのページに複数のアイコンをインライン展開できます。
CDN
CDN からファイルを直接使います。
html
<img src="https://cdn.jsdelivr.net/npm/kubai-icons-static@0/svg/folder.svg" width="28" height="28" alt="" />自由な色
上のファイルは 2 色で提供されています。別のアクセントカラーが必要な場合は、URL でアイコンをリクエストしてください。パッケージをインストールできないエージェントやツールにも向いています。
html
<img src="https://icons.kubai.design/api/icon/folder.svg?color=EC4899" width="28" height="28" alt="" />color: 6 桁の 16 進数。#は付けても付けなくてもかまいません。デフォルト: 5393FF。variant:colorまたはsoft。badge: バッジ付きアイコン用。semanticまたは 16 進数の値を指定します。size: 幅と高さをピクセルで指定します。16 から 2048 まで。デフォルト: 96。
jsDelivr では、バージョンを完全に指定した URL は長期間キャッシュされます。@0 のようにメジャーバージョンだけを指定した URL は定期的に更新され、新しいリリースが反映されます。
カスタムカラー
アイコンブラウザーでは、色とバリエーションを選んで、アイコンを SVG または PNG でダウンロードできます。これらのファイルは通常の 16 進数の色を使っているため、Figma などのデザインツールで正しく読み込まれます。
メタデータ
icons.json には、すべてのアイコンのカテゴリとタグが載っています。バッジ付きアイコンについては、ベースのアイコンとバッジも載っています。categories.json はカテゴリの一覧です。