Introduzione

Kubai Icons è una libreria open source di icone SVG a livelli con animazione al passaggio del mouse. Questa pagina elenca i pacchetti e spiega come le icone vengono nominate e versionate.

Ogni icona ricava tutte le sue sfumature da un solo colore principale. Al passaggio del mouse mostra ciò che l'oggetto fa: una cartella si apre, una busta si apre. Ogni icona è un modulo ES separato che contiene il markup SVG del suo stato fermo, detto stato di riposo, e la sua animazione hover.

Pacchetti

Pacchetto	Usalo per	Docs
`kubai-icons-react`	React 18+ e Next.js, incluso il rendering sul server	Pacchetto React
`kubai-icons-vue`	Vue 3.3+ e Nuxt	Pacchetto Vue
`kubai-icons`	JavaScript puro e il web component `<kubai-icon>`	Pacchetto JavaScript
`kubai-icons-static`	File SVG per tag `<img>`, strumenti di design e pagine senza JavaScript	Pacchetto SVG statico

Guida rapida

Questo esempio usa React. Per altri ambienti, vedi i pacchetti elencati sopra. Installa il pacchetto:

bash

npm install kubai-icons-react

Poi importa le icone che ti servono:

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

Nomi delle icone

I nomi delle icone sono in inglese e in kebab-case: folder, cloud-rain, arrow-up-right. I pacchetti JavaScript, React e Vue li esportano in PascalCase, come CloudRain. React e Vue esportano anche CloudRainIcon. I file statici mantengono il nome in kebab-case. Il catalogo delle icone cerca tra nomi e tag.

Molte icone di base esistono anche con badge, come folder-plus, user-check e calendar-clock. Le icone di oggetti che si possono spegnere esistono anche barrate, come bell-off.

Versionamento

I pacchetti seguono il semantic versioning e vengono rilasciati insieme. Rinominare o rimuovere un'icona è una modifica incompatibile; ridisegnarla no. Le note di rilascio sono pubblicate su GitHub.