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"`，讓每個角標自動採用合適的顏色，例如新增用綠色、移除用紅色、警告用琥珀色。
`trigger`	"hover"	`"hover"` 會在圖示被滑鼠滑過或取得鍵盤焦點時播放動態。`"parent"` 的作用相同，但對象是最近一層帶有 `data-kubai-trigger` 的上層元素；若沒有，則使用直接的父元素。`"none"` 不加入任何事件監聽，只有 `hover` 屬性能播放動態。
`hover`	無	`true` 播放動態，`false` 則反向播放。搭配 `trigger="none"` 可完全自行控制。
`active`, `defaultActive`, `onActiveChange`	無	切換型圖示的開關狀態，這類圖示在點擊或點選時會在兩種狀態間切換。`Bookmark` 就是一例。
`title`	無	無障礙名稱。未設定時，圖示會是 `aria-hidden`。請參閱無障礙。

其他 SVG 屬性，例如 className、style、事件處理函式和 ref，會傳遞給 <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 的伺服器元件和用戶端元件中使用，不需要額外設定。標記在伺服器上渲染，動態則在 hydration 時加入。DynamicIcon 是例外：它在伺服器上渲染空白的預留位置，並在瀏覽器中載入圖示。

深層匯入

為避免在開發伺服器中載入套件索引，請從圖示自己的檔案匯入。請參閱效能。

tsx

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