Gérer ses icônes en .svg avec Iconizr
Joël Buchs |17-09-2016
La plupart des sites web actuels sont constitués de nombreuses icônes qui nous aident à reconnaître des fonctionnalitées en un clin d'oeil. Depuis un certain temps maintenant, on a tendance à utiliser des images vectorielles au format .svg afin de remplir ce rôle. L'avantage de ce type d'image est qu'elle garde la même qualité quelle que soit sa grandeur. On peut tout à fait utiliser une image en .svg comme on le faisait avec les .png à l'époque dans son code HTML comme ceci :
<img src="img/monicone.svg" alt="mon icône" />
Il ne faudra pas oublier de spécifer une "width: 20px;" par exemple dans votre CSS afin que votre icône n'occupe pas toute la page.
Avec Iconizr, on va rassembler toutes nos icônes dans un seul et même fichier nommé icons.svg :
Lorsqu'il générera la CSS, Iconizr spécifiera simplement la hauteur à laquelle se trouve l'icône que l'on va utiliser. Par exemple pour l'appareil photo :
.icon-photo-camera,.icon-photo-camera\:regular{
background-image:url('icons/icons.svg');
background-position:0 -32px;
background-repeat:no-repeat
}
C'est bien beau tout ça, mais comment on l'utilise ? Il y a 2 façon :
1ère méthode
La méthode du gars qui n'aime pas trop le terminal et qui travaille sous Windows :
- Aller sur le site d'Iconizr
- Glisser ses icônes les unes après les autres dans l'interface prévue à cet effet
- Remplir le petit formulaire du dessous en spécifiant le chemin relatif vers le dossier de votre CSS (en gros, écrivez juste "css" et vous copierez les fichiers à la bonne place dans votre arborescence par la suite)
- Si vous êtes un bon garçon (ou une gentille fille), vous utilisez sans doutes SASS et il vous faudra également spécifier le nom du dossier dans lequel se trouve vos fichiers .scss
Vous pourrez en plus spécifier d'autres options telles que la taille qu'auront par défaut vos icônes.
Une fois que vous êtes satisfait de vos réglages, cliquez sur le gros bouton bleu en bas de la page, attendez que le compte à rebours soit terminé et vous obtiendrez un dossier contenant l'arborescence suivante :
Comment ça vous avez des fichiers en plus ? C'est normal. Ce petit malin d'Iconizr a pris la liberté de vous créer tous les fichiers nécessaires à ce que vous puissiez aussi utiliser vos icônes au format .png. Si vous n'en voyez pas l'utilité, vous pouvez, comme moi, supprimer sans autres le fichier icons.png ainsi que tous les fichiers comportant le mot "-png-" dans leur nom.
À partir de là, nous allons simplement créer un fichier index.html à la racine de notre arborescence afin de tester nos icônes. Il faudra bien entendu que cette page charge la CSS contenant les informations sur les différentes icônes. Cette CSS se trouve dans le fichier inconizr-svg-sprite.css.
Le voici :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iconizr</title>
<link rel="stylesheet" href="css/iconizr-svg-sprite.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<span class="icon-photo-camera"></span>
</body>
</html>
Notez que nous utiliserons ici des balises <span> qui sont de type "inline" pour afficher nos icônes avec la classe correspondant à l'icône que l'on souhaite utiliser. Comment savoir ? La classe a simplement pris le nom de l'icône que vous avez fourni avec un préfixe ("icon" par défaut). Si vous afficher maintenant cette page, vous ne verrez pas l'icône.
En effet, je viens de vous dire que les balises <span> sont de type "inline". Elles n'ont donc pas de hauteur, ni de largeur par défaut. Nous allons rajouter une classe ".icon" dans une feuille de style qui va faire ce job :
.icon {
height: 32px;
width: 32px;
}
N'oubliez pas d'inclure cette feuille de style dans le HTML. Et cette fois, lorsqu'on affiche la page index.html dans le navigateur...
Tada !!
Rien de très impressionant je vous l'accorde mais c'est ce que nous voulions. Si vous utilisez le scss, il faudra juste s'assurer que votre fichier "iconizr-svg-sprite.scss" se trouve au bon endroit pour être compilé avec les autres fichier .scss.
2ème méthode
La méthode plus pro qui vous évitera de recommencer tout le processus en ligne lorsque vous avez une nouvelle icône. Rendez-vous sur le Github d'Iconizr. Téléchargez le ZIP en cliquant sur le bouton vert en haut à droite. Décompressez le dossier iconizr-master ou vous le souhaitez.
Dans un premier temps, nous allons faire un lien symbolique vers le fichier iconizr.phps. Ouvrez un terminal et faites la commande suivante en indiquant le chemin absolu vers le fichier iconizr.phps comme premier paramètre :
ln -s /home/jojo/test/iconizr-master/iconizr.phps /usr/local/bin/iconizr
Vérifier que vous avez les bons droits sur iconizr.phps si cela ne fonctionne pas.
Vous pouvez maintenant exécuter la compilation par le biais de ce lien. Mais mettons avant cela des icônes à compiler à disposition d'Iconizr. Pour ce faire, nous devons créer un dossier nommé "icons" avec un dossier nommé "svg" à l'intérieur dans iconizr-master/src et y mettre nos icônes en .svg.
Pour compiler, ouvrez simplement un terminal dans iconizr-master/src et lancez la commande suivante :
iconizr --sass --out scss icons/svg
Pour l'exemple, nous compilons dans l'optique d'obtenir un fichier .scss contenant les icônes (qu'il faudra compiler avec vos autres fichiers .scss dans votre site). Vous pouvez cependant utiliser d'autres options comme --css pour obtenir directement du css.
Pour utiliser nos icônes, il suffira, comme dans la première méthode, de créer une balise (<span> en général) à laquelle on appliquera la classe correspondante à l'icône (.icon-nomIcone) comme ceci :
<span class="icon-facebook"></span>
Pour rappel, le <span> n'ayant pas d'hauteur ni de largeur par défaut, il faudra lui en donner une par le biais d'une classe par exemple pour l'icône s'affiche correctement.
Lorsque vous rajouterez des icônes à votre site, il vous faudra simplement les mettre dans le dossier svg que nous avons créé et relancer la dernière commande que nous avons vue. Si vous utiliser le scss, il faudra bien entendu également le recompiler.
