Documentation - Icônes.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Icônes
Marssel intègre un système d'icônes flexible basé sur des SVG avec support des icônes locales personnalisées, trois styles (outline, solid, duotone) et redimensionnement facile.
Utilisation de base
Affichez une icône avec icon-[nom] :
<!-- Icône simple -->
<span class="icon-[acorn]"></span>
<!-- Avec taille -->
<span class="icon-[acorn] icon-size-[large]"></span>
<!-- Avec couleur -->
<span class="icon-[acorn] icon-size-[xlarge] c-[2563eb]"></span>Tailles disponibles
Utilisez icon-size-[taille] pour définir la taille :
<!-- Petit (16px) -->
<span class="icon-[star] icon-size-[small]"></span>
<!-- Moyen (24px) - par défaut -->
<span class="icon-[star] icon-size-[medium]"></span>
<!-- Grand (32px) -->
<span class="icon-[star] icon-size-[large]"></span>
<!-- Extra grand (48px) -->
<span class="icon-[star] icon-size-[xlarge]"></span>
<!-- Taille personnalisée -->
<span class="icon-[star] icon-size-[150px]"></span>Types d'icônes
Marssel supporte trois styles d'icônes :
<!-- Outline (par défaut) -->
<span class="icon-[acorn] icon-size-[medium]"></span>
<!-- Solid -->
<span class="icon-[acorn-solid] icon-size-[medium]"></span>
<!-- Duotone -->
<span class="icon-[acorn-duotone] icon-size-[medium]"></span>Couleurs
Appliquez des couleurs avec c-[couleur] :
<!-- Couleur hexadécimale -->
<span class="icon-[check] icon-size-[medium] c-[10b981]"></span>
<!-- Couleur de thème -->
<span class="icon-[info] icon-size-[medium] c-[theme-peach]"></span>
<!-- Couleur au hover -->
<span class="icon-[heart] icon-size-[medium] c-[6b7280] c-[D41212]:hover"></span>
<!-- CurrentColor (hérite de la couleur du texte parent) -->
<div class="c-[2563eb]">
<span class="icon-[home] icon-size-[medium]"></span>
Accueil
</div>Icônes personnalisées
Ajoutez vos propres icônes SVG :
**Organisation des fichiers :**
public/
|----images/
|--------icons/
|------------outline/
|----------------my-icon.svg
|------------solid/
|----------------my-icon.svg
|------------duotone/
|----------------my-icon.svgGénérer le manifest des icônes
Après avoir ajouté vos icônes personnalisées, générez le fichier manifest :
# Depuis le package npm (commande complète)
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs
# Avec options personnalisées
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs \
--icons public/images/icons \
--manifest public/js/icons-manifest.json \
--prettyOptions disponibles :
- --icons : Chemin du dossier contenant vos icônes SVG (défaut : public/images/icons/)
- --manifest : Chemin de sortie du fichier manifest (défaut : public/js/icons-manifest.json)
- --pretty : Formater le JSON de manière lisible (recommandé pour le développement)
💡 Note : Le générateur scanne automatiquement les sous-dossiers outline/, solid/ et duotone/ et ajoute les suffixes appropriés aux noms des icônes.
Utilisation avec des chemins personnalisés
Si vous utilisez des chemins personnalisés, assurez-vous de les configurer à la fois dans la génération du manifest ET dans l'initialisation de Marssel :
# 1. Générer le manifest avec chemins personnalisés
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs \
--icons assets/svg/icons \
--manifest assets/data/icons.json \
--pretty// 2. Configurer Marssel avec les mêmes chemins
import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;
const app = new Marssel({
paths: {
iconsManifest: '/assets/data/icons.json'
}
});Utilisation des icônes importées
<!-- Icône personnalisée outline -->
<span class="icon-[my-icon] icon-size-[medium]"></span>
<!-- Icône personnalisée solid -->
<span class="icon-[my-icon-solid] icon-size-[medium]"></span>
<!-- Icône personnalisée duotone -->
<span class="icon-[my-icon-duotone] icon-size-[medium]"></span>Icônes animées
Ajoutez des animations aux icônes :
<!-- Rotation -->
<span class="icon-[spinner-ball-duotone] icon-size-[medium] c-[2563eb] icon-animated-[spin]"></span>
<!-- Pulse -->
<span class="icon-[circle-notch] icon-size-[medium] c-[2563eb] icon-animated-[pulse]"></span>Icônes courantes
Retrouvez toutes les icones disponibles dans la bibliothèque Marssel Icons.
API JavaScript
Contrôlez les icônes programmatiquement :
// Vérifier si le manifest est chargé
if (marssel.iconManager.isLoaded) {
console.log('Icônes chargées');
}
// Obtenir les statistiques du cache
const stats = marssel.iconManager.getCacheStats();
console.log(stats);
// { size: 45, iconsLoaded: 120, isLoaded: true }
// Nettoyer le cache
marssel.iconManager.clearCache();