Carnet Wiki

Quelques notes pour les icônes SVG de SPIP

Version 23 — 1 week ago — 86.248.xx.xx

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

Taille

  • plan de travail (viewbox) : 64x64
  • élément graphique ne doit pas toucher les bords. taille recommandée: 58 ou 60

Nettoyer le code SVG avec https://jakearchibald.github.io/svgomg

Recommandations


-  Privilégier le flat design
-  éviter les contours
-  éviter les dégradés
-  Icône en 2D (pas de 3D)
-  Icône “éthique” (cf charte SPIP)

A lire aussi: Règles pour la cohérence entre les icones : design better icons

Palette

NomUtilisation/ActionValeurIcone exemple
Bleu “Kermesse” Configurer #1d83d4 config-contenu-xx.svg
Gris “Conquet” Contour #666 rubrique-xx.svg

Palette secondaire

NomUtilisation/ActionValeurIcone exemple
Bleu “Libre comme Edgard” #80E1E5 groupe_mots-xx.svg
Rose “Jennifer 80’s” #E895B7 groupe_mots-xx.svg
Rouge “Shiraz” Danger #F43737 diff-xx.svg
Vert “écureuil dans la vallée” #54e360 diff-xx.svg
Vert “qui sent le sapin” Action #119914 media-audio.svg
Jaune “noisette tendre” #ffde47 rubrique-xx.svg
Jaune sombre “noisette à l’ombre” #ebba16 rubrique-xx.svg
Marron “SVP” #a37800 depot-xx.svg
Gris super clair #d3d3d3 mediabox-xx.svg
Gris Contour clair Ombrage #888 rubrique-xx.svg

Inspirations

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

Inspirations pour SPIP 3.2
-  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

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é

proposé : penpot}

- Penpot. Outil qui bouge bien et a une [petite petite commu Fr -> : " class='spip_url spip_out auto' rel='nofollow external'>https://app.element.io/#/room/#penpot-fr:matrix.org ]. Collaboratif mais résultat non responsive.

Apercu

Avril 2021