Au secours ! J’essaye de créer une police d’icônes à l’aide d’Icomoon et les pictogrammes importés ne sont que partiellement, voire pas du tout, visibles.

icomoon

Ayant un profil d'intégrateur HTML (ou de développeur front-end pour les intimes), je ne suis pas forcément très à l'aise lorsqu'il s'agit de manipuler des sources graphiques vectorielles, notamment issues d'Adobe Illustrator.
Je suis pourtant de plus en plus amené à le faire, notamment pour créer des polices d'icônes à partir de pictogrammes qu'on me fournit au format svg.

Pour se faire, j'utilise Icomoon : une application web qui permet, entre autres choses, la génération sous forme d'une police de caractères d'un pack d'icônes prêt à l'intégration.

Cependant petit problème, il arrive qu'après l'import, l'icône ne soit que partiellement, voire pas du tout visible dans IcoMoon. Je vais donc vous présenter dans cet article la solution pour palier à ce problème.

Il m'arrive encore régulièrement de réceptionner des chartes graphiques qui incorporent des pictogrammes et icônes qui, bien que vectoriels, posent problème lorsque je souhaite les exploiter.

A l'import des fichiers svg dans Icomoon, les icônes ne sont dans certains cas que partiellement, voir pas du tout, visibles. La capture ci-dessous illustre le problème. Le même icône a été importée deux fois (mais il y a une différence de traitement à la source (dans Illustrator) entre les deux, nous allons voir ça plus bas).

flang-icomoon-incomplete_icon

Solution : décomposez vos tracés à la source

Afin que l'ensemble des éléments vectoriels qui constituent un même icône soient importés en totalité dans Icomoon, il faut pouvoir sélectionner non pas les tracés, mais les contours de celle-ci.
Ci-dessous, une capture en provenance d'Illustrator qui illustre la différence, à la source, entre les deux icônes :

flang-icomoon-illustrator

On voit dans la partie gauche de la capture que ce sont (sauf pour la serrure) des tracés qui sont sélectionnés. Dans la capture de droite, ce sont les contours qui sont sélectionnés.

Pour ce faire, dans Illustrator sélectionner l'ensemble des tracés à l'aide de l'outil Lasso ou de l'outil Baguette Magique puis menu "Objet" > choisir "Décomposer".

Il ne vous reste plus qu'à sauvegarder la sélection au format svg.

Ok, ok, mais si j'utilise Photoshop pour créer mes pictogrammes ?

Il existe une manière simple et très efficace d'exporter à l'unité l'ensemble des icônes présents dans un fichier psd au format svg. Pour ce faire, il faut :

  • Avoir Photoshop et Illustrator d'installés sur votre machine
  • Installer le script save-ps-to-svg.jsx (trouvé sur le repository GitHub d'un certain Amir Hameed alias picwellwisher12pk) dans le dossier \Presets\Scripts de votre installation de Photoshop.

La procédure d'export est alors la suivante :

  1. Renommez tous les calques à exporter en terminant par .svg
    flang-svg-renommer_calque
  2. Sélectionnez la forme à l'aide de l'outil de sélection de tracé (touche "A" ou icône dans la barre d'outils de gauche).
    flang-svg-selectionner_formejpg
  3. Dans Photoshop CS5 ou une version antérieure, cliquez sur "Associer" dans la barre d’options.
    flang-svg-associer
  4. Dans Photoshop CS6, choisissez "Fusionner les composants de forme" dans le menu déroulant "Opérations" sur les tracés dans la barre d’options.
    flang-svg-fusionner
  5. Lancez le script en choisissant "fichier" > "script". Illustrator va alors démarrer automatiquement et exporter l'un après l'autre les calques svg à l'endroit où vous avez sauvegardé votre psd.

Pour finir : quelques conseils pour nos amis graphistes

  • Vérifiez que les icônes que vous récupérez sur le net sont libres de droits.
  • Arrêtez l'utilisation d'icônes au format bitmap sur lesquels sont appliqués des effets d'incrustation de couleurs : l'intégrateur ne peut pas produire ce type d'effets avec CSS et les pictogrammes au format gif, jpeg ou png ont un rendu tout baveux sur les écrans Retina/HD.
  • Préférez l'utilisation de packs d'icônes libres issus de bibliothèques comme Font Awesome, Glyphicons ou Flaticon.
  • Si vous produisez des icônes custom, exportez chaque icône dans un fichier à part (un icône = un fichier) et au format svg.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.