Introduction

Kubai Icons est une bibliothèque open source d’icônes SVG en couches avec animation au survol. Cette page liste les paquets et explique comment les icônes sont nommées et versionnées.

Chaque icône tire toutes ses teintes d’une seule couleur d’accent. Au survol, elle mime ce que fait l’objet : un dossier s’ouvre, une enveloppe se décachette. Chaque icône est un module ES distinct qui contient le balisage SVG de son état immobile, appelé pose de repos, et son animation au survol.

Paquets

Paquet	À utiliser pour	Documentation
`kubai-icons-react`	React 18+ et Next.js, avec rendu côté serveur	Paquet React
`kubai-icons-vue`	Vue 3.3+ et Nuxt	Paquet Vue
`kubai-icons`	JavaScript pur et web component `<kubai-icon>`	Paquet JavaScript
`kubai-icons-static`	Fichiers SVG pour les balises `<img>`, les outils de design et les pages sans JavaScript	Paquet SVG statique

Démarrage rapide

Cet exemple utilise React. Pour d’autres environnements, consultez les paquets listés ci-dessus. Installez le paquet :

bash

npm install kubai-icons-react

Importez ensuite les icônes dont vous avez besoin :

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

Noms des icônes

Les noms d’icônes sont en anglais et en kebab-case : folder, cloud-rain, arrow-up-right. Les paquets JavaScript, React et Vue les exportent en PascalCase, par exemple CloudRain. React et Vue exportent aussi CloudRainIcon. Les fichiers statiques gardent le nom en kebab-case. Le navigateur d’icônes recherche dans les noms et les étiquettes.

Beaucoup d’icônes de base existent aussi en icônes à badge, comme folder-plus, user-check et calendar-clock. Les icônes d’objets qui peuvent être désactivés existent aussi en icônes barrées, comme bell-off.

Gestion des versions

Les paquets suivent le versionnage sémantique et sont publiés ensemble. Renommer ou supprimer une icône est un changement majeur ; la redessiner n’en est pas un. Les notes de version sont publiées sur GitHub.