Formation « Créer des blocs avec Gutenberg »

Définir une icône personnalisée pour son bloc

Lecture : 4 minutes • 4

Dans ce cours nous allons voir comment créer une icône personnalisée en SVG dans le cas où les icônes proposées par défaut avec Dashicons ne conviennent pas.

Dans ce cours on va s’appuyer sur l’exemple src/2-icon/index.js de l’extension capitainewp-gut-bases, disponible sur Github.

Une icône SVG personnalisée

La police Dashicons, livrée avec WordPress en standard possède pas mal de pictogrammes sympathiques qui ne conviendront cependant pas à toutes les situations.

Heureusement on va pouvoir utiliser nos propres SVG !

Le SVG est un format d’illustrations vectorielles, c’est-à-dire sans pixels et donc toujours nettes peut importe la taille de l’écran ! À la place des pixels on enregistre des courbes, des chemins et des coordonnées.

Le SVG est tout à fait compris par le navigateur depuis IE9 et j’espère vraiment que vous les utilisez déjà pour les icônes, pictogrammes et logo de vos sites !

Où trouver des SVG ?

The Noun Project

Il existe de nombreuses banques d’icônes et packs sur Internet mais l’un des sites préférés des développeurs est The Noun Project où vous pourrez trouver des pictogrammes monochromes pour tout et n’importe quoi !

Trouver des icônes sur The Noun Project
Trouver des icônes sur The Noun Project

Vous pourrez soit obtenir une licence d’utilisation des pictogrammes via un abonnement annuel (d’environ 40$), soit utiliser la licence creative commons qui vous oblige à citer la source du pictogramme sur votre site.

Les créer soi-même

Logo des logiciels de dessin vectoriel

Sinon, vous pouvez créer vos propres icônes via Adobe Illustrator, Figma ou encore Sketch sur Mac. Il suffira pour chacun d’entre eux d’exporter le fichier au format SVG.


Dans tous les cas on n’importe pas le fichier SVG comme on appellerait une image dans du HTML. En JSX on va intégrer le code de l’image directement dans notre Javascript.

Après tout le SVG n’est rien de plus qu’un XML codifié (comme le HTML au final). Essayez d’en ouvrir un dans votre éditeur de code pour voir !

Définir un SVG personnalisé dans son bloc

Ce qu’il va se passer c’est qu’on va intégrer le code du SVG directement dans notre JSX, ce qui peut vite alourdir le code et nuire à sa lisibilité. Heureusement, on va pouvoir le stocker dans un fichier à part.

J’ai donc créé un nouveau fichier custom-icon.js qui contiendra mon SVG. Voici l’arborescence de mon dossier :

Arborescence des fichiers de notre bloc, avec l'ajout d'un fichier custom-icon.js
Le fichier custom-icon.js contient le code SVG de notre icône

Dans le fichier index.js je vais devoir importer ce fichier. J’ajoute donc l’import au début du fichier, et j’appelle mon icône myIcon dans le paramètre icon :

JSX
2-icon/index.js

On ne définira donc pas l’icône dans le fichier block.json dans ce cas là.

On va maintenant aller voir dans le fichier custom-icon.js , que j’ai créé pour l’occasion :

JSX
2-icon/index.js

Alors plusieurs choses sont importantes ici :

  • On stocke le SVG dans une variable (une constante même) que j’ai nommé myIcon
  • Le SVG est inséré directement, sans guillemets, comme on le fait pour du HTML, c’est une des particularités de JSX
  • La taille carrée de 20px par 20px est importante pour les pictogrammes utilisés en icône de bloc
  • À la fin on exporte myIcon afin qu’il puisse être réutilisé dans d’autres fichiers.

On va le voir à nouveau au cours de la formation : à chaque fois que l’on fera un sous-composant ou que l’on externalisera du code, on utilisera la commande export default afin de pouvoir utiliser ce code ailleurs, via un import.

Conseil

Notez bien que cette technique est valable pour tous les SVG que vous voudrez utiliser dans Gutenberg, comme par exemple dans un bloc ou dans les panneaux d’options.

Par contre en l’état le compilateur risque de ne pas être content, car le code SVG contient des caractères qui ne lui plait pas forcément. On va donc devoir utiliser un convertisseur SVG en ligne pour éviter ça.

Convertir un SVG pour le rendre compatible JS

Il existe un convertisseur SVG – JSX tout simple en ligne. Il suffit d’importer un fichier SVG ou coller son code et le convertisseur fait le nécessaire pour ne pas créer d’erreurs lors de la compilation :

Le convertisseur rend compatible le SVG avec JSX

Choisissez un SVG et essayez par vous-même :

Convertisseur SVG

À éviter

Certains SVG ne fonctionneront pas via le convertisseur, il renverra alors [Object] en rouge à la place du code nettoyé. Commencez déjà par retirer les balises <text> de la signature Noun Project vers la fin du fichier. Si ça ne fonctionne toujours pas, il faudra opter pour une autre icône.

Maintenant il ne nous reste plus qu’à coller le code généré à droite dans notre fichier JS :

JSX
2-icon/custom-icon.js

Quelques recommandations toutefois :

  • N’oubliez pas d’ajouter export default myIcon à la fin, sur une nouvelle ligne.
  • N’oubliez pas non plus d’ajouter width='20px' et height='20px' dans la balise SVG.

Essayez maintenant d’ajouter votre bloc dans l’éditeur, vous devriez voir votre icône personnalisée !

Le bloc affiche une icône personnalisée
Notre icône personnalisée apparait bien !

Cool ! Il ne me reste plus qu’à vous montrer comment stocker plusieurs icônes SVG dans le même fichier, ce qui peut simplifier les choses lorsque l’on utilise plusieurs icônes dans nos blocs.

Stocker plusieurs icônes dans le même fichier

Si votre bloc fait usage de plusieurs SVG, on pourrait les stocker dans des fichiers JS séparés, mais autant les réunir dans un seul et même endroit.

On pourrait créer un fichier icons.js contenant un objet principal, où chaque sous-objet étant un SVG :

JSX
src/icons.js

Conseil

Vous pouvez mettre le code SVG sur plusieurs lignes sans aucun souci.

On pourrait même mettre ce fichier à l’extérieur du bloc, afin de mettre en commun des pictos utilisés par plusieurs blocs de notre extension.

Du côté d’un bloc, on aurait donc ceci :

JSX
src/2-icon/index.js

Et voilà ! Libre à vous désormais de créer les icônes de votre choix pour vos blocs !

Dans le prochain cours, on va commencer à rendre nos blocs administrables.

4

Questions, réponses et commentaires

  1. Hugo

    Le 18 mai 2021

    Les paramètres étant maintenant dans le block.json, comment sélectionner la const myIcon ?
    Merci 🙂

    1. Maxime BJ

      Le 18 mai 2021

      Tu peux toujours le mettre dans ton index.js, il suffit de ne pas déclarer l’icône dans le JSON ! Mais pour déclarer plusieurs blocs, c’est moins simple. Je te conseille du coup de partir sur la base code que j’ai dans la formation, ce sera plus simple à gérer qu’avec le json. J’essaierai de mettre à jour la formation dès que possible.

      1. Hugo

        Le 19 mai 2021

        Super merci de votre réponse

  2. Dominique

    Le 1 novembre 2023

    Bonjour,
    Le convertisseur n’est plus accessible via le lien présent dans la formation.
    Ce lien est fonctionnel : https://svg2jsx.com/
    Merci pour cette formation très utile.

Laisser un commentaire