Personalização

Cor, selos, tamanho e movimento do ícone são definidos por props e propriedades personalizadas de CSS.

Cor

Todas as cores de um ícone são calculadas a partir de uma única cor de destaque. Por padrão, o destaque é currentColor, então você pode mudá-lo definindo a propriedade CSS color no ícone ou em qualquer ancestral:

html

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

As cores são calculadas com color-mix() do CSS, então uma transição em color faz um fade cruzado em todos os gradientes:

css

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

Selos

Um ícone com selo, como folder-plus ou user-check, tem um selo em um dos cantos. Por padrão, o selo é um disco escuro com um glifo branco. badgeColor muda a cor do disco. badgeColor="semantic" escolhe uma cor adequada a cada selo: verde para adicionar e concluir, vermelho para remover e cancelar, âmbar para avisos.

tsx

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

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

Propriedades personalizadas de CSS

Defina-as em um ícone ou em qualquer ancestral para substituir tons individuais. As marcas são as linhas e os símbolos desenhados sobre um ícone.

Propriedade	Controles
`--ki-c`	Cor base para gradientes e marcas claras. Padrão: `currentColor`.
`--ki-e`	Cor base para contornos e marcas escuras. Padrão: `--ki-c`.
`--ki-w`	Cor das marcas que são brancas por padrão.
`--ki-b`	Cor do disco do selo. Padrão: cinza-escuro neutro.
`--ki-l`	O quanto os preenchimentos sólidos grandes esmaecem para branco em direção ao topo, de 0% a 100%.

variant="soft" define todos estes, exceto --ki-b.

Definir a variante para uma página inteira

Uma variante é herdada, como color. Defina-a em qualquer elemento e todos os ícones dentro dele a seguem, a menos que tenham a própria variant. A configuração mais próxima sempre vence: primeiro a prop do ícone, depois o elemento mais próximo e, por fim, o padrão color.

tsx

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

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

O mesmo objeto funciona no Vue com :style. Sem framework, chame setVariant:

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

setVariant(document.documentElement, "soft");

Os arquivos SVG estáticos têm as cores gravadas, então a variante é escolhida pela pasta: svg/ ou svg-soft/.

Tamanho

Defina o tamanho com a prop size. A 24px ou menos, use ícones base em vez de ícones com selo, pois o selo tem pouco espaço. A tela é descrita em Linguagem de design.

Movimento

Todo movimento dura 460ms em cubic-bezier(.22, 1, .36, 1) e parte da posição atual do ícone, então pode ser revertido no meio do caminho. Quando prefers-reduced-motion está ativo, os ícones vão direto para a pose final, sem animação.