自訂

圖示的顏色、角標、尺寸和動態都透過屬性和 CSS 自訂屬性設定。

顏色

圖示的所有顏色都由同一個主色計算而來。主色預設為 currentColor，因此可在圖示或任何上層元素上設定 CSS 的 color 屬性來變更：

html

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

顏色以 CSS color-mix() 計算，因此對 color 設定 transition，所有漸層就會一起淡入淡出：

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：

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 時，圖示會直接移到結束姿態，不播放動畫。