React

kubai-icons-react ofrece cada icono como un componente de React. Requiere React 18 o posterior.

Instalación

bash

npm install kubai-icons-react

Uso

Importa un icono por su nombre y renderízalo como componente:

tsx

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

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

Propiedades

Propiedad	Predeterminado	Descripción
`size`	24	Ancho y alto en píxeles
`color`	currentColor	El color de acento del que derivan todos los degradados, contornos y marcas. Consulta Personalización
`variant`	heredado; si no, "color"	`"soft"` usa rellenos más claros y contornos más oscuros, y dibuja las marcas blancas en un tono oscuro.
`badgeColor`	gris oscuro	Color del disco de la insignia: cualquier color CSS, o `"semantic"` para un color adecuado a cada insignia, como verde para añadir, rojo para eliminar y ámbar para advertir
`trigger`	"hover"	`"hover"` reproduce el movimiento cuando se pasa el cursor sobre el icono o este recibe el foco del teclado. `"parent"` hace lo mismo con el ancestro más cercano que tenga `data-kubai-trigger`, o con el elemento padre directo si no hay ninguno. `"none"` no añade listeners, por lo que solo la propiedad `hover` reproduce el movimiento.
`hover`	Ninguno	`true` reproduce el movimiento y `false` lo invierte. Combínalo con `trigger="none"` para tener control total.
`active`, `defaultActive`, `onActiveChange`	Ninguno	Estado activado o desactivado de los iconos de tipo interruptor, que alternan entre dos estados al hacer clic o tocar. `Bookmark` es un ejemplo
`title`	Ninguno	Nombre accesible. Sin él, el icono tiene `aria-hidden`. Consulta Accesibilidad.

Las demás propiedades de SVG, como className, style, los controladores de eventos y ref, se pasan al <svg>.

Activar desde un elemento padre

Para reproducir el movimiento cuando se pasa el cursor sobre un botón completo o este recibe el foco del teclado, añade data-kubai-trigger al botón y trigger="parent" al icono:

tsx

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

Iconos por nombre

Si el nombre del icono solo se conoce en tiempo de ejecución, como un valor procedente de una API, usa DynamicIcon. Cada icono sigue siendo un chunk independiente, por lo que el bundle no incluye todo el conjunto.

tsx

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

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

Renderizado en el servidor

Los iconos funcionan sin configuración en los Server Components y los Client Components de Next.js. El marcado se renderiza en el servidor y el movimiento se añade durante la hidratación. DynamicIcon es la excepción: renderiza un marcador vacío en el servidor y carga el icono en el navegador.

Importaciones directas

Para evitar cargar el índice del paquete en un servidor de desarrollo, importa un icono desde su propio archivo. Consulta Rendimiento.

tsx

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