Carnet Wiki

Quelques notes pour les icônes SVG de SPIP

Version 44 — 1 week ago erational

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

Taille

Plan de travail (viewbox) : 64x64px

Zone de sécurité: laisser 2px en bordure

Essayer de tomber sur des valeurs entières sur la grille pour un meilleur affichage en petite taille

Eviter le chevauchement des zones graphiques de couleurs différentes

Convention de code / ’PSR’

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

  • Déclaration: préciser le viewbox et width / height
  • Ne pas donner un id au calque sauf nécessaire
  • Essayer de mettre l’attribut fill en premier pour les éditer facilement et les voir facilement sur les diff.

Ex.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#fff" d="M13.3 10.7H24V16H13.3zM40 26.7h10.7V32H40zM40 48h10.7v5.3H40z"/>
  <path fill="#666" d="M26.7 5.3c1.5 0 2.7 1.2 2.7 2.7v10.7c0 1.5-1.2 2.7-2.7 2.7h-5.3v5.3h13.3V24c0-1.5 1.2-2.7 2.7-2.7h16c1.5 0 2.7 1.2 2.7 2.7v10.7c0 1.5-1.2 2.7-2.7 2.7h-16c-1.5 0-2.7-1.2-2.7-2.7V32H21.3v16h13.3v-2.7c0-1.5 1.2-2.7 2.7-2.7h16c1.5 0 2.7 1.2 2.7 2.7V56c0 1.5-1.2 2.7-2.7 2.7h-16c-1.5 0-2.7-1.2-2.7-2.7v-2.7h-16c-1.5 0-2.7-1.2-2.7-2.7V21.3h-5.3c-1.5 0-2.7-1.2-2.7-2.7V8c0-1.5 1.2-2.7 2.7-2.7h16.1zm24 42.7H40v5.3h10.7V48zm0-21.3H40V32h10.7v-5.3zM24 10.7H13.3V16H24v-5.3z" />
</svg>

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 “Edgard” #80E1E5 groupe_mots-xx.svg
Rose “Jennifer29” Favori #E895B7 groupe_mots-xx.svg
Rouge “Shiraz” Danger #F43737 diff-xx.svg
Vert “Trap” Ajouter #4CAF50 article-add-24.svg
Vert “Troglo” Action #119914 media-audio.svg
Jaune “Noisette” #ffde47 rubrique-xx.svg
Jaune “Maroilles” Plugin #ffbf00 plugin-xx.svg
Orange “Ramen” #d86600 traduction-xx Ramen" Plugin #d86600 traduction-xx .svg
Marron “SVP” Archive/dépot #a37800 depot-xx.svg
Gris “Lille” #d3d3d3 mediabox-xx.svg
Gris “Souris” 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

Discussion

Pour discuter des enjeux et des évolutions
https://core.spip.net/issues/4751

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 :

Pour le backend de CMS :

Grosses listes :

Outil proposé

-  Penpot. Outil qui bouge bien et a une petite commu Fr. Collaboratif mais résultat non responsive donc bof.

Apercu

Avril 2021