Des pictos / icônes symboliques pour tout le monde
Je fais un ticket pour la future PR et poser le plan d'action. C'est la suite de #4562 (closed)
Proposition pour intégrer un jeu complet d'icônes symboliques.
Les besoins sont multiples pour pleins d'éléments d'interface, dans le core et les plugins : des barres d'outils, des boutons d'actions, etc. Et chacun doit réimplémenter ça un peu à sa sauce, notamment dans le privé.
C'est un besoin bien distinct des icônes svg de couleur dont on dispose actuellement dans le privé : on veut des pictos symboliques qui héritent de taille et de la couleur du texte, et issus d'un même set afin d'avoir un style unifié. Cela vient donc en complément.
Il s'agit donc de reprendre un jeu d'icônes existant, qu'on n'aura pas à maintenir, optimisé, et qui fournit des icônes cohérentes visuellement, utilisables dans tous les contextes. Cf. plus bas pour une comparaison initiale des candidats possibles.
Utilisation
Ces icônes seraient utilisables de 2 façons :
1) Des classes .sp-icone
Des classes à ajouter à n'importe quel élément inline quand il s'agit d'icônes purement décoratives.
Ces classes pouvant finir dans squelettes utilisés dans le public, pour éviter les conflits, on propose sp-icone
.
Exemples :
<button class="sp-icone_menu">Ouvrir le menu</button>
<h2 class="titrem sp-icone_machin">Mon titre</h2>
2) Une balise #ICONE
En complément, on peut vouloir embarquer une icône svg dans le HTML.
On propose de reprendre et d'adapter la balise #ICON
du plugin Zcore, qui fait ça très bien.
Cette balise permet d'embarquer une icône du set par défaut, mais également n'importe quelle autre (je rentre pas dans les détails).
Un modèle correspondant permettra aussi d'inclure des icônes svg dans les textes : <icone|icone=truc>
#ICONE{identifiant}
#ICONE{chemin/vers/mon_icone.svg}
#ICONE{#identifiant_autre_set}
Identifiants sémantiques
Les identifiants des icônes seront directement ceux du jeu d'icônes choisi. Mais ils peuvent avoir des noms un peu barbares : chevron-double-right, eye-slash, grip-vertical, etc.
Dans tous les cas on pourra les utiliser tels quels, mais en plus de ça, on propose de faire une correspondance sémantique pour les icônes correspondants aux actions les plus courantes. Par exemple au lieu de faire #ICONE{chevron-double-down}
on pourra faire #ICONE{deplier}
.
Cela passerait par un pipeline, donc liste qui peut être complétée selon ses besoins.
La liste initiale est visible ici : https://demo.hedgedoc.org/3zIXkcFLTVSwV0nKC1_qcA?both
Ressources privé / public
Cela veut dire 2 ressources à charger :
- Une font-face pour les classes
- Un sprite svg pour la balise
Dans le privé, il faut charger les 2. Dans le public, cela pourrait se faire optionnellement, à la demande.
Candidats
Pour finir un tableau comparatif des jeux d'icônes possibles (à licences libres), avec mes commentaires initiaux. Petite préférence pour Feather actuellement.
edit: voir aussi https://icones.js.org/
Lib | Nb | sprite | fontface | Commentaire |
---|---|---|---|---|
Bootstrap | 1300+ | 693ko | 85ko | Clés en main, beaucoup d’icônes (trop ?) |
Feather | 286 | (~100ko) | - | Styles rounded. Bonne balance nb icônes / poids. |
Octico (Github) | 433 | (~240ko) | - | Styles rounded. Bonne balance nb icônes / poids. Beaucoup de manips à faire pour créer sprite et cie. |
Material (Google) | ? | (?ko) | 44ko | Style rounded / épaisseur variable. Beaucoup de manips à faire pour créer sprite et cie. Google ! |
Core-ui | 554 | 418ko | 63ko | Clés en main. Sets inutiles non pris en compte dans ce tableau (brands, flags, …) |
Bytesize | 101 | 11ko | - | Style rounded / épaisseur variable. Léger : le minimum syndical. |
Open Iconic | 223 | 45ko | 15ko | |
Forkawesome | 796 | (~660ko) | 109ko | |
Remix | 2271 | |||
Ikonate | Designées pour être accessibles |
Sprite entre parenthèses = non fourni dans le dépôt ou la dist → poids théorique.