Carnet Wiki

Quelques notes pour les icônes SVG de SPIP

Version 6 — 2 months ago JLuc

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

Taille du viewbox

64px *64px

Recommandations


-  

...

Palette

Vert “écureuil dans la vallée” #54e360

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

Inspiration : icones IBM

- 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) + - " class='spip_url spip_out auto' rel='nofollow external'>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

Outil proposé : Penpot