简介

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`	SVG 文件，用于 `<img>` 标签、设计工具和不使用 JavaScript 的页面	静态 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。