Formation « Créer des blocs avec Gutenberg »

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

Lecture : 4 minutes • 0

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 de bézier, 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

Sinon, vous pouvez créer vos propres icônes via Adobe Illustrator 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 obtenue :

On ajoute un fichier custom-icon dans le dossier de notre bloc

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

Et dans le fichiercustom-icon.js :

JSX
2-icon/custom-icon.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 :

convertisseur en ligne SVG JSX
Le convertisseur rend compatible le SVG avec JSX

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

Convertisseur SVG

En cas d’erreur

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

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 votre bloc dans Gutenberg, vous devriez voir votre icône personnalisée !

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

Cool ! Il ne me reste plus qu’à vous montrer comment stocker plusieurs 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.

0

Questions, réponses et commentaires

Laisser un commentaire