Personalización

El color, las insignias, el tamaño y el movimiento de los iconos se configuran con propiedades y propiedades personalizadas de CSS.

Color

Todos los colores de un icono se calculan a partir de un único color de acento. De forma predeterminada, el acento es currentColor, así que puedes cambiarlo definiendo la propiedad CSS color en el icono o en cualquier ancestro:

html

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

Los colores se calculan con color-mix() de CSS, así que una transición en color funde todos los degradados:

css

.kubai-icon { transition: color .3s ease; }

Insignias

Un icono con insignia, como folder-plus o user-check, tiene una insignia en una esquina. De forma predeterminada, la insignia es un disco oscuro con un glifo blanco. badgeColor cambia el color del disco. badgeColor="semantic" elige un color adecuado para cada insignia: verde para añadir y completar, rojo para eliminar y cancelar, ámbar para advertencias.

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

Propiedades personalizadas de CSS

Defínelas en un icono o en cualquier ancestro para reemplazar tonos concretos. Las marcas son las líneas y los símbolos dibujados sobre un icono.

Propiedad	Controles
`--ki-c`	Color base de los degradados y las marcas claras. Valor predeterminado: `currentColor`.
`--ki-e`	Color base de los contornos y las marcas oscuras. Valor predeterminado: `--ki-c`.
`--ki-w`	Color de las marcas que son blancas de forma predeterminada
`--ki-b`	Color del disco de la insignia. Valor predeterminado: gris oscuro neutro
`--ki-l`	Cuánto se desvanecen hacia el blanco, de abajo arriba, los rellenos sólidos grandes, de 0 % a 100 %

variant="soft" establece todas estas, excepto --ki-b.

Definir la variante de toda una página

Una variante se hereda, igual que color. Defínela en cualquier elemento y todos los iconos que contenga la seguirán, salvo que tengan su propia variant. Siempre gana el ajuste más cercano: primero la propiedad del propio icono, luego el elemento más próximo y, por último, el valor predeterminado de color.

tsx

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

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

El mismo objeto funciona en Vue con :style. Sin framework, llama a setVariant:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

Los archivos SVG estáticos llevan los colores escritos en su interior, así que elige la variante por carpeta: svg/ o svg-soft/.

Tamaño

Define el tamaño con la propiedad size. A 24 px o menos, usa iconos base en lugar de iconos con insignia, porque la insignia tiene poco espacio. El lienzo se describe en Lenguaje de diseño.

Movimiento

Cada movimiento dura 460 ms con cubic-bezier(.22, 1, .36, 1) y parte de la posición actual del icono, por lo que puede invertirse a mitad de camino. Si prefers-reduced-motion está activado, los iconos pasan directamente a la pose final sin animación.