Génération d'une fonticon pour le front

Ce document guide la mise à jour et l'intégration des icônes en police dans un projet Next.js, en assurant la compatibilité avec le design system existant.

1. Importer et modifier la fonticon v4

1. Se rendre sur IcoMoon
2. Dans l'onglet Sélection, importer la police SVG existante (conserver les metrics et metadata)
3. Se rendre sur l'onglet Generate Font et cliquer sur l’icône à modifier
4. Cliquer sur Replace et importer la nouvelle icône
5. Dans Préférences, choisir les réglages comme suit :
   • Font Name : FontOdalys
   • Class Prefix et Class Suffix : Laisser vide
   • Options à activer :
     • ❌ Support IE 8
     • ❌ Support IE 7 & IE 6
     • ✅ Include metadata in fonts
     • ❌ Embed font in CSS
     • ❌ Generate preprocessor variables for:
       • ❌ Sass (with @use)
       • ❌ Sass (with @import)
       • ❌ Stylus
       • ❌ Less
     • ✅ Use a class CSS Selector : .odalys-icon

2. Générer et héberger la police

1. Télécharger la police générée
2. Convertir le fichier .woff en .woff2 si nécessaire (via un convertisseur en ligne)
3. Héberger le fichier .woff2 sur le bucket AWS :
   • URL : https://mediasv4.odalys-vacances.com/_mediasdev_/fonts/

3. Mettre à jour l'import de la police

1. Ouvrir le fichier icons.css situé dans :

   packages/design-system/styles/icons.css
2. Mettre à jour l’URL de l’import de la police en remplaçant l’ancien chemin par le nouveau :

   @font-face {
     font-family: 'FontOdalys';
     font-display: swap;
     src: url('https://mediasv4.odalys-vacances.com/_mediasdev_/fonts/FontOdalys.woff2')
       format('woff2');
     font-weight: normal;
     font-style: normal;
   }

4. Mettre à jour les classes CSS

1. Ouvrir le fichier icons.css
2. Remplacer toutes les classes existantes par celles générées dans style.css du dossier exporté par IcoMoon
3. Vérifier que les classes sont bien prises en compte dans l’ensemble du projet

5. Vérification et test

1. Vérifier que les icônes s'affichent correctement sur l’interface
2. Tester plusieurs icônes pour s’assurer qu’elles correspondent bien aux nouvelles classes CSS
3. Confirmer l'affichage sur plusieurs navigateurs et appareils