Icons ^commun

Il existe plusieurs façons de gérer les pictos sur un projet :

• via une fonticon (librairie fontawesome ou fonticon sur mesure)
• via un sprite svg
• via des fichiers svg en dur

Nous allons utiliser la technique du sprite svg.

Via gulp et à partir des fichiers svg sélectionnés, un fichier sprite est généré et les pictos sont disponibles via une balise svg avec l'id correspondant pour n'afficher que celui concerné.
Tous les svg "bruts" sont rangés dans le dossier "src/icon/sprite".
La commande gulp "spritesvg" va compiler ces images en un seul fichier "www/data/sprite/sprite.svg" et mettre à jour le template de la documentation ici présent.

Exemple avec 2 icons dans le fichier.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 512 512" id="arrow-circle-down" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-92.5-4.5-6.9-6.9c-4.7-4.7-12.5-4.7-17.1.2L273 330.3V140c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v190.3l-82.5-85.6c-4.7-4.8-12.4-4.9-17.1-.2l-6.9 6.9c-4.7 4.7-4.7 12.3 0 17l115 115.1c4.7 4.7 12.3 4.7 17 0l115-115.1c4.7-4.6 4.7-12.2 0-16.9z"/></symbol>
<symbol viewBox="0 0 512 512" id="arrow-circle-left" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zM256 472c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm-12.5-92.5-115.1-115c-4.7-4.7-4.7-12.3 0-17l115.1-115c4.7-4.7 12.3-4.7 17 0l6.9 6.9c4.7 4.7 4.7 12.5-.2 17.1L181.7 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H181.7l85.6 82.5c4.8 4.7 4.9 12.4.2 17.1l-6.9 6.9c-4.8 4.7-12.4 4.7-17.1 0z"/></symbol>
</svg>

Il est également possible de maintenir manuellement le fichier sprite svg. Cela est possible mais il faut nettoyer les fichiers avant d'en copier/coller le code et maintenir manuellement la documentation.
Il suffit ensuite d'appeler le svg avec son id comme indiqué ci-dessous.

<svg>
    <use xlink:href="data/sprite/sprite.svg#arrow-circle-left"></use>
</svg>

Afin de faciliter les appels des icons sous php, un include inc/common/svgsprite.php a été mis en place.
L'appel de ce composant se fait avec 2 arguments possibles :

• $svgId pour appeler le bon id
• $svgSize pour appliquer la taille souhaitée (ico-sm | ico | ico-lg).

<?
$svgId = 'angle-right';
$svgSize = 'ico'; // ico - ico-sm - ico-lg
include('inc/common/compo/svgsprite.php');
?>

<svg class="svg <?php echo($svgSize); ?>">
    <use xlink:href="data/sprite/sprite.svg#<?php echo($svgId); ?>"></use>
</svg>

.ico { 
    width:$ico; height:$ico; fill:currentColor; position:relative; display:inline-block; top:-2px;
    &-sm { width:$ico-sm; height:$ico-sm; }
    &-lg { width:$ico-lg; height:$ico-lg; }
}