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" />
    </>
  );
}

Props

Prop	默认值	说明
`size`	24	宽度和高度，单位为像素。
`color`	currentColor	主色，所有渐变、轮廓和内部图形都由它派生。详见自定义。
`variant`	继承上级设置，否则为 "color"	`"soft"` 使用更浅的填充色和更深的轮廓，并以深色绘制原本白色的内部图形。
`badgeColor`	深灰色	角标圆底的颜色：可以是任意 CSS 颜色，也可以设为 `"semantic"`，为每个角标匹配合适的颜色，例如添加用绿色、移除用红色、警告用琥珀色。
`trigger`	"hover"	`"hover"` 在悬停于图标或图标获得键盘焦点时播放动效。`"parent"` 的行为相同，但作用于最近的带有 `data-kubai-trigger` 的祖先元素；如果没有这样的祖先元素，则作用于直接父元素。`"none"` 不添加事件监听，只有 `hover` prop 能播放动效。
`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。每个图标仍然是独立的 chunk，打包结果不会包含整套图标。

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

服务端渲染

图标无需配置即可用于 Next.js 的 Server Components 和 Client Components。SVG 代码在服务端渲染，动效在激活时添加。DynamicIcon 是个例外：它在服务端渲染一个空的占位元素，到浏览器中才加载图标。

深层导入

为避免开发服务器加载包的入口文件，可直接从各图标自身的文件导入。详见性能。

tsx

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