Introdução

O Kubai Icons é uma biblioteca de código aberto de ícones SVG em camadas com movimento ao passar o cursor. Esta página lista os pacotes e explica como os ícones são nomeados e versionados.

Cada ícone tira todos os seus tons de uma única cor de destaque. Ao passar o cursor, ele encena o que o objeto faz: uma pasta se abre, um envelope é aberto. Cada ícone é um módulo ES separado que guarda a marcação SVG do seu estado parado, chamado de pose de repouso, e o movimento de hover.

Pacotes

Pacote	Use para	Docs
`kubai-icons-react`	React 18+ e Next.js, incluindo renderização no servidor	Pacote React
`kubai-icons-vue`	Vue 3.3+ e Nuxt	Pacote Vue
`kubai-icons`	JavaScript puro e o web component `<kubai-icon>`	Pacote JavaScript
`kubai-icons-static`	Arquivos SVG para tags `<img>`, ferramentas de design e páginas sem JavaScript	Pacote de SVG estático

Início rápido

Este exemplo usa React. Para outros ambientes, consulte os pacotes listados acima. Instale o pacote:

bash

npm install kubai-icons-react

Depois, importe os ícones de que precisa:

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 */}
    </>
  );
}

Nomes dos ícones

Os nomes dos ícones são em inglês e em kebab-case: folder, cloud-rain, arrow-up-right. Os pacotes JavaScript, React e Vue os exportam em PascalCase, como CloudRain. React e Vue também exportam CloudRainIcon. Os arquivos estáticos mantêm o nome em kebab-case. O explorador de ícones pesquisa por nomes e tags.

Muitos ícones base também existem com selo, como folder-plus, user-check e calendar-clock. Ícones de coisas que podem ser desligadas também existem com um risco, como bell-off.

Versionamento

Os pacotes seguem o versionamento semântico e são lançados juntos. Renomear ou remover um ícone é uma mudança incompatível; redesenhá-lo não é. As notas de versão são publicadas no GitHub.