簡介

Kubai Icons 是一套開源的分層 SVG 圖示庫，懸停時有動態效果。本頁列出各個套件，並說明圖示的命名和版本規則。

每個圖示的所有色階都來自同一個主色。滑過時，圖示會演出該物品的動作：資料夾打開，信封拆封。每個圖示都是獨立的 ES 模組，內含其靜止狀態（稱為靜止姿態）的 SVG 標記和懸停動態。

套件

套件	適用情境	文件
`kubai-icons-react`	React 18 以上和 Next.js，包含伺服器端渲染	React 套件
`kubai-icons-vue`	Vue 3.3 以上和 Nuxt	Vue 套件
`kubai-icons`	純 JavaScript 和 `<kubai-icon>` Web Component	JavaScript 套件
`kubai-icons-static`	適用於 `<img>` 標籤、設計工具和不使用 JavaScript 的頁面的 SVG 檔案	靜態 SVG 套件

快速開始

此範例使用 React。其他環境請參閱上方列出的套件。安裝套件：

bash

npm install kubai-icons-react

然後匯入你需要的圖示：

tsx

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

export default function App() {
  return (
    <>
      <Folder />                                 {/* 24px, in the text color */}
      <MailPlus size={32} color="#EC4899" />     {/* any CSS color */}
    </>
  );
}

圖示名稱

圖示名稱為英文，採用 kebab-case：folder、cloud-rain、arrow-up-right。JavaScript、React 和 Vue 套件以 PascalCase 匯出，例如 CloudRain。React 和 Vue 另外匯出 CloudRainIcon。靜態檔案保留 kebab-case 名稱。圖示瀏覽器可搜尋名稱和標籤。

許多基底圖示也有帶角標的版本，例如 folder-plus、user-check 和 calendar-clock。可以關閉的物品也有帶斜線的版本，例如 bell-off。

版本規則

套件遵循語意化版本，並一起發布。重新命名或移除圖示屬於重大變更，重新繪製則不是。版本說明發布在 GitHub。