自定义

图标的颜色、角标、尺寸和动效都通过 props 和 CSS 自定义属性设置

颜色

图标的所有颜色都由同一个主色计算得出。主色默认为 currentColor，因此可以在图标或其任意祖先元素上设置 CSS color 属性来修改：

html

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

这些颜色通过 CSS color-mix() 计算，因此为 color 设置过渡后，所有渐变都会平滑过渡到新颜色：

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 的图标除外。离图标越近的设置优先级越高：图标自身的 prop 优先，其次是最近的元素，最后是默认值 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 prop 设置尺寸。尺寸为 24px 及以下时，角标空间有限，应使用基础图标，不宜使用带角标的图标。画布规格详见设计语言。

动效

所有动效都持续 460ms，缓动曲线为 cubic-bezier(.22, 1, .36, 1)，并从图标的当前位置开始，因此可以在中途反向。设置了 prefers-reduced-motion（减弱动态效果）时，图标会直接切换到结束状态，不播放动画。