Icônes React dessinées sur une grille de 24 px, en 4 styles, sous licence MIT.

npm i @fraza/icons

Parcourir les icônes · icons.fraza.ca

import { BellIcon } from '@fraza/icons/BellIcon';

<BellIcon className="size-5 text-accent" />

Points forts

• Une icône, un fichier. Chaque icône s’importe seule. Votre bundle ne contient que celles que vous utilisez.
• La couleur du texte. Tout est en currentColor. Taille et couleur se règlent en CSS, comme pour une lettre.
• Typée, sans dépendance. Seul React (19 ou plus) est requis. Les types TypeScript sont livrés avec chaque icône.

Les 4 styles

| Style | Import d’une icône | |---|---| | Solid (par défaut) | @fraza/icons/<Nom> ou @fraza/icons/solid-rounded/<Nom> | | Stroke | @fraza/icons/stroke-rounded/<Nom> | | Solid Sharp | @fraza/icons/solid-sharp/<Nom> | | Stroke Sharp | @fraza/icons/stroke-sharp/<Nom> |

import { HomeIcon } from '@fraza/icons/HomeIcon';                // Solid
import { HomeIcon } from '@fraza/icons/stroke-rounded/HomeIcon'; // Stroke
import HomeIcon from '@fraza/icons/stroke-sharp/HomeIcon';       // export par défaut

Les noms sont propres à Fraza et décrivent l’objet dessiné : TrashIcon, BellIcon, ChevronDownIcon.

Props et types

Chaque icône est un composant React qui reçoit les props du <svg> (width, height, className…) et porte Icon.keywords, ses mots-clés en anglais et en français.

import type { FrazaIcon } from '@fraza/icons/types';

Chargement par nom

Pour une icône connue seulement par son nom à l’exécution, @fraza/icons/lazy (ou @fraza/icons/<style>/lazy) exporte loaders, une table { Nom: () => import('./Nom.js') }. Chaque icône y reste un fichier chargé seulement à l’appel.

import { loaders } from '@fraza/icons/stroke-rounded/lazy';

const { BellIcon } = await loaders.BellIcon();

Dans l’admin, getAdminIcon(name) du core s’en sert.

SVG et métadonnées

| Fichier | Contenu | |---|---| | @fraza/icons/svg/<style>/<Nom>.svg | Le SVG brut | | @fraza/icons/meta.json | La liste des icônes, avec leurs catégories et leurs mots-clés |

Barrel

Le barrel (@fraza/icons, @fraza/icons/<style>) réexporte tout un style. Il reste publié pour la compatibilité, mais l’outil de publication du core le refuse dans le core et les modules. Préférez l’import par fichier.

Licence

MIT. Voir LICENSE.