Industrialiser ses SVG en Font avec Grunt

Dans la plupart de nos projets web, nous devons manipuler des SVG ayant pour rôle d’icônes/logos dans nos boutons/menus. Pour faciliter leur intégration, diminuer leur taille et augmenter les performances d’affichage, nous les transformons en Font, le plus souvent à la main via des sites/logiciels tiers.

Cette étape doit être faite pour chaque ajout de nouveau SVG et on se rend compte assez vite de la perte de temps que cela produit.

Si cette étape n’est faite qu’une seule fois dans le projet, il est rarement utile de l’industrialiser mais dans le cas contraire, où les données graphiques augmentent ou changent régulièrement, il est possible que les codepoints générés changent ou qu’il ne soit pas possible de reprendre la bibliothèque de SVG déjà importée et de devoir tout recommencer. Grunt-webfont.

Webfont

Grunt-webfont est une tache Grunt permettant la transformation de vos SVG en fichiers Font (eot,woff,ttf) utilisable via les @font-face CSS. (compatible IE8+)

Grunt-webfont vous fournit un fichier CSS/LESS/SASS/Stylus contenant la @font-face, le codepoint de chaque icone et un style « simple » pour l’intégrer à vos pages.

Pre-requis

Grunt 4.0+
Fontforge (si vous voulez utiliser ce moteur, information plus bas)
OSX :

[java]brew install fontforge –with-python[/java]

Linux :

[java]sudo apt-get install fontforge[/java]

Il n’existe pas de version Windows de FontForge.
Ttfautohint.
OSX :

[java]brew install ttfautohint –with-python[/java]

Linux :

[java]sudo apt-get install ttfautohint[/java]

Windows :

Installation

[java]npm install grunt-webfont –save-dev[/java]

Moteurs disponibles

Ce projet propose 2 moteurs de rendu différents, fontforge et node.

Le fonctionnement et les options de configuration sont les mêmes quel que soit le moteur. En revanche, seul le moteur node est compatible Windows.

Pour plus d’information concernant les avantages/inconvénients je vous renvoie à la page dédiée sur le site github du projet.

Configuration

Dans votre Gruntfile.js :

[java]grunt.loadNpmTasks(‘grunt-webfont’);[/java]

Configuration simple :

Suite à la génération des divers fichiers, vous pouvez utiliser les classes CSS se trouvant dans la feuille de style.

Codepoints :

La feuille de style générée affiche rapidement ses limites et il se peut que l’on ait besoin d’utiliser les icônes hors de son contexte initialement prévu par la feuille de style.
Dans ce cas-là, nous pouvons rencontrer plusieurs problèmes liés aux codepoints.
En effet, grunt-webfont regénère les codepoints à chaque lancement et par ordre alphanumérique, ce qui peut entraîner un décalage dans les codepoints à l’ajout de nouveau fichier SVG :

SVG 1 : 0xE001
SVG 2 : 0xE002
SVG 3 : 0xE003

Si nous rajoutons un nouvel SVG au milieu, un décalage va apparaître dans la prochaine génération.

SVG 1 : 0xE001
SVG 2 : 0xE002
SVG 2.1 : 0xE003
SVG 3 : 0xE004

Pour résoudre ce problème, nous avons la possibilité de figer pour chaque SVG un codepoint.

Dans grunt-webfont, cet espace de code réservé peut être défini simplement soit en donnant un espace dédié à la future Font générée soit en figeant chaque SVG à un code spécifique.

LESS/SASS :

Si vous utilisez LESS ou SASS dans votre projet, il est possible d’avoir vos fichiers générés pour votre pré-processeur favori.

Génération des fichiers

Vous pouvez générer les fichiers en utilisant la commande :

[java]grunt webfont[/java]

Fichiers générés

Fonts (eot, svg, ttf et woff).
Feuilles de style dans le format voulu.
Fichier HTML d’une démonstration des icônes.

Utilisation

L’utilisation de ces icônes se fait via les classes CSS fournies dans la feuille de style :

[java].icon_svg_1:before {
content:"\e001";
}
.icon_svg_2:before {
content:"\e002";
}
.icon_svg_3:before {
content:"\e003";
}[/java]

Afin d’utiliser directement ces icônes, grunt-webfont a dans la feuille de style, un style pour créer votre cellule comprenant l’icône :

[java].icon {
font-family:"icons";
display:inline-block;
vertical-align:middle;
line-height:1;
font-weight:normal;
font-style:normal;
speak:none;
text-decoration:inherit;
text-transform:none;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}[/java]

Si l’utilisation du mot clef icon vous pose problème, il est possible de le changer dans les options de la tâche Grunt :

[java]webfont: {
icons: {
src: "arbo/pour/les/fichiers/SVG",
dest: "arbo/pour/les/fichiers/FONT/générés",
destCss: "arbo/pour/les/fichiers/CSS/générés",
options: {
engine: "node", //Nous forçons l’utilisation du moteur *node*
codepoints: {
"SVG 1": 0xE001,
"SVG 2": 0xE002,
"SVG 3": 0xE003
},
templateOptions: {
baseClass: ‘my-icon’, // .icon devient .my-icon
classPrefix: ‘my-class_’, // .icon-ICONE-NAME devient .my-class-ICONE-NAME
mixinPrefix: ‘my-mixin-‘ // all mixin will start with my-mixin-MIXIN-NAME
}
}
}
}[/java]

Conclusion

Un outil simple et intéressant permettant un gain de temps dans la mise à jour de nos icônes dans nos projets web.