Intégration et personnalisation des icônes avec IcoMoon

IcoMoon est la solution de référence pour la création et la gestion de bibliothèques d'icônes sur mesure. Conçu pour les intégrateurs et les designers exigeants, cet outil garantit des icônes d'une netteté absolue, dessinées sur une grille de pixels extrêmement précise.

Le choix de la performance

L'application IcoMoon permet de générer des packs d'icônes sous de multiples formats (SVG, PDF, sprites, etc.). Pour Magix CMS 4, nous avons fait le choix stratégique d'utiliser les polices d'icônes (Icon Fonts).

Cette méthode offre un double avantage :

1. Une légèreté absolue : Vos icônes se chargent instantanément.

2. Une flexibilité totale : Vous pouvez modifier leur taille, leur couleur ou leur ajouter des ombres en quelques lignes de CSS, exactement comme s'il s'agissait de texte.

Magix CMS vous fournit nativement un pack contenant les icônes les plus couramment utilisées pour la navigation, l'interface utilisateur et les réseaux sociaux.

L'évolution technique : Exportation en SCSS (Sass)

Avec l'arrivée de Magix CMS 4 et de son architecture front-end moderne, la gestion des icônes franchit un nouveau cap.

L'exportation et l'intégration du pack IcoMoon se font désormais de manière native en SCSS (Sass) via des directives d'importation (@import).

• L'avantage ? Vos icônes s'intègrent parfaitement et proprement dans le flux de compilation de vos feuilles de style globales. Vous bénéficiez ainsi de la puissance des variables SCSS pour gérer vos chemins d'accès ou vos codes de caractères (content) de manière centralisée.

Comment personnaliser votre pack d'icônes ?

Vous n'êtes pas figé au pack par défaut ! Magix CMS a prévu un processus simple pour ajouter vos propres icônes ou supprimer celles que vous n'utilisez pas :

1. Importation du projet : Récupérez le fichier de configuration global.json fourni dans les dossiers de votre thème Magix CMS.

2. Édition en ligne : Rendez-vous sur l'application web IcoMoon App et importez ce fichier global.json. L'application rechargera exactement la sélection d'icônes actuelle de votre site.

3. Modification : Ajoutez de nouvelles icônes depuis la vaste bibliothèque gratuite d'IcoMoon, ou importez vos propres fichiers SVG.

4. Génération et Export : Générez votre nouvelle police, téléchargez le package, et remplacez les fichiers de police (eot, ttf, woff) ainsi que les fichiers SCSS dans votre dossier de thème. Lors de la prochaine compilation de vos styles, vos nouvelles icônes seront prêtes à être utilisées !

Configuration de icomoon