React

kubai-icons-react は、各アイコンを React コンポーネントとして提供します。React 18 以降が必要です。

インストール

bash

npm install kubai-icons-react

使い方

名前でアイコンをインポートし、コンポーネントとしてレンダリングします。

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

プロパティ

プロパティ	デフォルト	説明
`size`	24	幅と高さ (ピクセル)。
`color`	currentColor	すべてのグラデーション、輪郭、マークの基準となるアクセントカラー。カスタマイズを参照してください。
`variant`	継承、なければ "color"	`"soft"` は塗りを明るく、輪郭を濃くします。白いマークはダークトーンで描かれます。
`badgeColor`	ダークグレー	バッジの円の色。任意の CSS の色、または `"semantic"` を指定できます。"semantic" を指定すると、追加は緑、削除は赤、警告は琥珀色など、バッジに合った色になります。
`trigger`	"hover"	`"hover"` は、アイコンにカーソルを合わせたとき、またはキーボードフォーカスが当たったときにモーションを再生します。`"parent"` は、`data-kubai-trigger` を持つ最も近い祖先要素に対して同じ動作をします。該当する要素がない場合は直接の親要素が対象です。`"none"` はリスナーを追加しないため、モーションを再生するのは `hover` プロパティだけです。
`hover`	なし	`true` でモーションを再生し、`false` で逆再生します。`trigger="none"` と組み合わせると、完全に制御できます。
`active`, `defaultActive`, `onActiveChange`	なし	クリックまたはタップで 2 つの状態を切り替えるトグルアイコンのオン/オフ状態。例として `Bookmark` があります。
`title`	なし	アクセシブルネーム。指定しない場合、アイコンは `aria-hidden` になります。アクセシビリティを参照してください。

className、style、イベントハンドラー、ref など、その他の SVG プロパティは <svg> にそのまま渡されます。

親要素からトリガーする

ボタン全体にホバーしたとき、またはキーボードフォーカスが当たったときにモーションを再生するには、ボタンに data-kubai-trigger を、アイコンに trigger="parent" を追加します。

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

名前でアイコンを使う

API から取得した値のように、アイコン名が実行時にしか分からない場合は、DynamicIcon を使います。各アイコンは引き続き別のチャンクになるため、バンドルにセット全体は含まれません。

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

サーバーレンダリング

アイコンは、設定なしで Next.js のサーバーコンポーネントとクライアントコンポーネントの両方で動作します。マークアップはサーバーでレンダリングされ、モーションはハイドレーション時に追加されます。DynamicIcon は例外で、サーバーでは空のプレースホルダーをレンダリングし、ブラウザーでアイコンを読み込みます。

ディープインポート

開発サーバーでパッケージのインデックスを読み込まないようにするには、アイコンをそのファイルから直接インポートします。パフォーマンスを参照してください。

tsx

import Folder from "kubai-icons-react/icons/folder";