Carnet Wiki

Quelques notes pour les icônes SVG de SPIP

Version 12 — 2 months ago — olivier

Quelques notes pour retrouver un peu de cohérence entre les icônes SVG du backoffice de SPIP

Taille du viewbox

64px *64px

Recommandations


-  Privilégier le flat design
-  Icône en 2D (pas de 3D)
-  Icône “éthique” (cf charte SPIP)
-  Nettoyer le code SVG avec https://jakearchibald.github.io/svgomg
-  Règles pour la cohérence entre les icones : design better icons

...

Palette

NomValeurIcone exemple
Bleu “Libre libre comme Edgard le ciel #80E1E5 groupe_mots-xx.svg
Rose “Jennifer tendresse 80’s” #E895B7 groupe_mots-xx.svg
Rouge “Shiraz” #F43737 diff-xx.svg <div style=“background-color:#F43737;height:45px;width:45px;display:inline-block style=”background-color:#E895B7;height:45px;width:45px;display:inline-block ;">
Vert “écureuil dans la vallée” #54e360 diff-xx #54e360 cache-empty-xx .svg
Jaune “noisette tendre” #ffde47 rubrique-xx.svg
Jaune sombre “noisette à l’ombre” #ebba16 rubrique-xx.svg
Gris Contour clair #888 rubrique-xx.svg
Gris Contour sombre #666 rubrique-xx.svg

Inspirations courantes

-  fatcow https://www.fatcow.com/free-icons historiquement, modifiée sépia
-  flaticon https://www.flaticon.com récemment et notamment https://www.flaticon.com/authors/freepik

Autres Inspirations

-  Remix Icon : Jeu d’icônes préconisé par l’administration https://remixicon.com/

-  IBM : https://www.ibm.com/design/language/iconography/ui-icons/library (scroller) + https://www.ibm.com/design/language/iconography/app-icons/library + https://www.ibm.com/design/language/iconography/pictograms/library

Vers un “design system”

Un design system permet à la fois de travailler en équipe, à côté des tickets (qui ne sont pas forcément l’idéal pour traiter de design), et de documenter les styles, les jeux de couleur avec les variables css, les composants...

Ça peut se construire au fur et à mesure. C’est une ressource documentaire hyper utile pour par exemple quelqu’un qui débarque dans un projet.

Exemples :
-  https://www.laregion.fr/design ou https://systeme-de-design.gouv.fr
-  Grosse liste : https://www.designsystemsforfigma.com
-  https://www.design.foyer.lu

Outil proposé : penpot

Penpot. Outil qui bouge bien et a une petite commu Fr : https://app.element.io/#/room/#penpot-fr:matrix.org