カスタマイズ

アイコンの色、バッジ、サイズ、モーションは、プロパティと CSS カスタムプロパティで設定します。

カラー

アイコンのすべての色は、1 つのアクセントカラーから計算されます。デフォルトのアクセントは currentColor なので、アイコンまたは任意の祖先要素に CSS の color プロパティを設定すれば変更できます。

html
<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

色は CSS の color-mix() で計算されるため、color にトランジションを指定すると、すべてのグラデーションがクロスフェードします。

css
.kubai-icon { transition: color .3s ease; }

バッジ

folder-plus や user-check のようなバッジ付きアイコンには、角にバッジが付いています。バッジは、デフォルトでは白いグリフを載せた濃い色の円です。badgeColor で円の色を変更できます。badgeColor="semantic" を指定すると、追加と完了は緑、削除とキャンセルは赤、警告は琥珀色というように、バッジに合った色が選ばれます。

tsx
import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

CSS カスタムプロパティ

アイコンまたは任意の祖先要素にこれらを設定すると、個々のトーンを上書きできます。マークとは、アイコンに描かれた線やシンボルのことです。

プロパティコントロール
--ki-cグラデーションと明るいマークのベースカラー。デフォルト: currentColor。
--ki-e輪郭と暗いマークのベースカラー。デフォルト: --ki-c。
--ki-wデフォルトで白いマークの色。
--ki-bバッジの円の色。デフォルト: ニュートラルなダークグレー。
--ki-l大きなベタ塗りが上に向かって白へフェードする度合い。0% から 100% まで。

variant="soft" は、--ki-b を除くこれらすべてを設定します。

ページ全体のバリエーションを設定する

バリエーションは color と同様に継承されます。任意の要素に設定すると、その中のすべてのアイコンが従います。ただし、アイコン自身に variant があればそちらが優先されます。より近い指定が常に優先され、順番は、アイコン自身のプロパティ、最も近い要素、デフォルトの color です。

tsx
import { Folder, VARIANTS } from "kubai-icons-react";

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

同じオブジェクトは、Vue でも :style で使えます。フレームワークを使わない場合は、setVariant を呼び出します。

js
import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

静的 SVG ファイルには色が書き込まれているため、フォルダーでバリエーションを選びます。svg/ または svg-soft/ です。

サイズ

size プロパティでサイズを設定します。バッジを入れる余裕がほとんどない 24px 以下では、バッジ付きアイコンではなくベースアイコンを使ってください。キャンバスについてはデザイン言語で説明しています。

モーション

すべてのモーションは cubic-bezier(.22, 1, .36, 1) で 460ms 再生され、アイコンの現在の位置から始まるため、途中で逆再生できます。prefers-reduced-motion が設定されている場合、アイコンはアニメーションせずに終了ポーズへ直接切り替わります。

Kubai Icons は無料で使えます プロジェクトを支援する