React

kubai-icons-react fornece cada ícone como um componente React. Requer React 18 ou superior.

Instalar

bash

npm install kubai-icons-react

Uso

Importe um ícone pelo nome e renderize-o como componente:

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Props

Prop	Padrão	Descrição
`size`	24	Largura e altura em pixels.
`color`	currentColor	A cor de destaque da qual derivam todos os gradientes, contornos e marcas. Consulte Personalização.
`variant`	herdado; se não houver, "color"	`"soft"` usa preenchimentos mais claros e contornos mais escuros, e desenha as marcas brancas em um tom escuro.
`badgeColor`	cinza-escuro	Cor do disco do selo: qualquer cor CSS ou `"semantic"` para uma cor adequada a cada selo, como verde para adicionar, vermelho para remover e âmbar para aviso.
`trigger`	"hover"	`"hover"` reproduz o movimento quando o ícone recebe o cursor ou o foco do teclado. `"parent"` faz o mesmo para o ancestral mais próximo com `data-kubai-trigger` ou, se não houver, para o elemento pai direto. `"none"` não adiciona listeners, então só a prop `hover` reproduz o movimento.
`hover`	Nenhum	`true` reproduz o movimento e `false` o reverte. Combine com `trigger="none"` para ter controle total.
`active`, `defaultActive`, `onActiveChange`	Nenhum	Estado ligado/desligado de ícones de alternância, que mudam entre dois estados ao serem clicados ou tocados. `Bookmark` é um exemplo.
`title`	Nenhum	Nome acessível. Sem ele, o ícone fica `aria-hidden`. Consulte Acessibilidade.

Outras props de SVG, como className, style, manipuladores de eventos e ref, são repassadas ao <svg>.

Acionar a partir do elemento pai

Para reproduzir o movimento quando um botão inteiro recebe o cursor ou o foco do teclado, adicione data-kubai-trigger ao botão e trigger="parent" ao ícone:

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

Ícones por nome

Se o nome do ícone só é conhecido em tempo de execução, como um valor vindo de uma API, use DynamicIcon. Cada ícone continua sendo um chunk separado, então o bundle não inclui o conjunto inteiro.

tsx

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

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

Renderização no servidor

Os ícones funcionam em Server Components e Client Components do Next.js sem configuração. A marcação é renderizada no servidor e o movimento é adicionado na hidratação. DynamicIcon é a exceção: ele renderiza um espaço reservado vazio no servidor e carrega o ícone no navegador.

Importações diretas

Para evitar carregar o índice do pacote em um servidor de desenvolvimento, importe o ícone do próprio arquivo. Consulte Desempenho.

tsx

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