Introducción

Kubai Icons es una biblioteca de código abierto de iconos SVG en capas con movimiento al pasar el cursor. Esta página enumera los paquetes y explica cómo se nombran y se versionan los iconos.

Cada icono toma todos sus tonos de un único color de acento. Al pasar el cursor, representa lo que hace el objeto: una carpeta se abre, un sobre se desprecinta. Cada icono es un módulo ES independiente que contiene el marcado SVG de su estado estático, llamado pose de reposo, y su movimiento al pasar el cursor.

Paquetes

Paquete	Úsalo para	Documentación
`kubai-icons-react`	React 18 o posterior y Next.js, con renderizado en el servidor	Paquete de React
`kubai-icons-vue`	Vue 3.3 o posterior y Nuxt	Paquete de Vue
`kubai-icons`	JavaScript puro y el componente web `<kubai-icon>`	Paquete de JavaScript
`kubai-icons-static`	Archivos SVG para etiquetas `<img>`, herramientas de diseño y páginas sin JavaScript	Paquete de SVG estático

Inicio rápido

Este ejemplo usa React. Para otros entornos, consulta los paquetes indicados arriba. Instala el paquete:

bash

npm install kubai-icons-react

A continuación, importa los iconos que necesites:

tsx

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

export default function App() {
  return (
    <>
      <Folder />                                 {/* 24px, in the text color */}
      <MailPlus size={32} color="#EC4899" />     {/* any CSS color */}
    </>
  );
}

Nombres de los iconos

Los nombres de los iconos están en inglés y en kebab-case: folder, cloud-rain, arrow-up-right. Los paquetes de JavaScript, React y Vue los exportan en PascalCase, como CloudRain. React y Vue también exportan CloudRainIcon. Los archivos estáticos conservan el nombre en kebab-case. El explorador de iconos busca en nombres y etiquetas.

Muchos iconos base también existen con insignia, como folder-plus, user-check y calendar-clock. Los iconos de elementos que se pueden apagar también existen tachados, como bell-off.

Versionado

Los paquetes siguen el versionado semántico y se publican juntos. Renombrar o eliminar un icono es un cambio incompatible; rediseñarlo no lo es. Las notas de cada versión se publican en GitHub.