Système de Material Icons

Ce document décrit l'architecture et l'utilisation du système d'icônes Material Design dans le projet.

Architecture

Le projet utilise une approche de chargement dynamique de fichiers SVG locaux pour gérer les icônes. Contrairement à une police d'icônes (Icon Font) ou à un bundle d'icônes à la compilation, ce système permet de ne charger que les icônes nécessaires à l'exécution, ce qui est crucial lorsque les icônes sont définies dynamiquement par une API (Directus).

Composants Clés

1. Stockage des actifs : Les fichiers SVG sont situés dans static/material-icons/outlined/.
2. Composant Icon2.svelte : C'est le composant principal recommandé.
   • Fonctionnement : Il effectue un fetch() asynchrone du fichier SVG local.
   • Mise en cache : Utilise une Map partagée (context="module") pour éviter de re-télécharger la même icône plusieurs fois au cours d'une session.
   • Stylisation : Le SVG est injecté via {@html} et nettoyé (suppression des dimensions fixes) pour être piloté par CSS via currentColor.
3. Composant MaterialIcon.svelte : Une approche alternative utilisant les masques CSS (mask-image).

Pourquoi cette approche ?

1. Données Dynamiques (Runtime)

L'application étant pilotée par un CMS (Directus), les noms des icônes ne sont pas connus au moment du build (SSG). Une importation statique via Vite/Rollup est donc impossible.

2. Contexte Capacitor & SSG

Bien que le composant utilise fetch(), dans le cadre d'une application Capacitor, le "réseau" est en réalité le système de fichiers local de l'appareil. Le chargement est donc quasi-instantané et fonctionne hors-ligne.

3. Performance & Poids

• Évite le surpoids : Charger toute la bibliothèque Material Icons (~2500 icônes) dans le bundle initial serait prohibitif.
• Granularité : Seules les icônes réellement demandées par l'API sont lues sur le disque.

Utilisation recommandée

Le composant Icon2.svelte doit être privilégié pour sa flexibilité de stylisation (couleur via le texte parent) et son système de cache intégré.

<script>
	import Icon2 from '$lib/components/ui/Icon2.svelte';
</script>

<!-- Taille en pixels ou unité CSS -->
<Icon2 name="home" variant="outlined" size={24} />
<Icon2 name="settings" variant="outlined" size="2.5rem" className="text-blue-500" />

Optimisation du Service Worker

Le dossier /material-icons/ est explicitement exclu du cache du Service Worker (voir src/unable_serviceworker/service-worker.js).

Raison : Mettre en cache des milliers de petits fichiers SVG lors de l'installation du Service Worker ralentirait considérablement l'initialisation de l'application et saturerait inutilement le stockage de l'appareil. On s'appuie sur le cache disque standard du navigateur/webview et le cache mémoire de Icon2.svelte.

Maintenance

Pour ajouter de nouvelles icônes, il suffit de déposer le fichier .svg correspondant dans le dossier static/material-icons/outlined/. Assurez-vous que le nom du fichier correspond au nom attendu par l'API.