Gestion des icônes SVG en JSON

Dans un projet web les icônes peuvent être gérées de plusieurs façons :

• Avec une police d'icônes/icon fonts en utilisant un générateur de police personnalisé comme IcoMoon. Bien que cela soit très pratique, à chaque modification (ajout ou remplacement), il faut régénérer les fichiers de la police.
• En utiliser un sprite SVG, c’est-à-dire un fichier unique qui contient toutes les icônes - voir l'article de La Cascade : Comment travailler avec des icônes en SVG

Mais il existe une autre solution : l'utilisation d'un fichier JSON. Ce dernier à l'avantage d'être modifiable très rapidement avec un simple éditeur de texte. On part d'un fichier JSON classique avec le nom et le code de l'icône unifié, ce qui donne, par exemple :

{
"delete": "m1 7 6-6 9 9 9-9 6 6-9 9 9 9-6 6-9-9-9 9-6-6 9-9z",
"edit": "m1 24.7v6.25h6.25l18.4-18.4-6.25-6.25zm29.5-17c0.65-0.65 0.65-1.71 0-2.36l-3.89-3.89c-0.65-0.65-1.71-0.65-2.36 0l-3.05 3.05 6.25 6.25z",
"link": "m25.3 25.3h-18.7v-18.6l4.67-0.0878v-4.65h-9.33v28h28v-11.7h-4.67zm-9.33-23.3 4.67 4.66-7 7 4.67 4.67 7-7 4.67 4.66v-14z",
"map": "m16 1c-5.8 0-10.5 4.7-10.5 10.5 0 7.87 10.5 19.5 10.5 19.5s10.5-11.6 10.5-19.5c0-5.8-4.7-10.5-10.5-10.5zm0 14.2c-2.07 0-3.75-1.68-3.75-3.75s1.68-3.75 3.75-3.75 3.75 1.68 3.75 3.75-1.68 3.75-3.75 3.75z"
}

On commence par charger le fichier des icônes (dans le header, par exemple) :

$file = 'ico.json'; // Path to json file
$data = file_get_contents($file); 
$dataico = json_decode($data, true);

Une simple fonction PHP pour gérer le tout :

function icosvg($ico, $width=32, $height=32) {
	return '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="'.$width.'" height="'.$height.'" viewBox="0 0 '.$width.' '.$height.'" aria-hidden="true" focusable="false"><path d="'.$dataico[$ico].'"/></svg>';
}

Il ne reste plus qu'à appeler la fonction pour afficher l'icône souhaitée :

echo icosvg('map');

Note : il est parfaitement possible d'y ajouter la gestion des couleurs