Icones
Utilitaires et guide de création des icones dans Trilogy
Les tailles des icônes
Les icônes créées par les designers n'ont pas de taille ou de couleur définies. Le tableau qui suit présente les tailles existantes pour utiliser les icônes au sein de Trilogy.
| Taille | Classe CSS | Dimensions de l'icône en elle-même (pixels) Responsabilité : designers |
Espace occupé par l'icône et sa zone (en pixels) Responsabilité : Trilogy |
|---|---|---|---|
| Petit | .is-small | 20 x 20 | 32 x 32 |
| Moyen | .is-medium | 30 x 30 | 48 x 48 |
| Grand | .is-large | 44 x 44 | 66 x 66 |
| Très grand | .is-huge | 66 x 66 | 99 x 99 |
Les bonnes pratiques pour créer une icône
- • L'icône ne doit pas être entourée de vide. Si elle est carrée, elle prend donc tout l'espace de travail. Si elle est rectangulaire, elle ne peut donc avoir du vide que sur un des axes (x ou y).
- • L'icône doit alors être alignée sur l'axe qui n'est pas occupé intégralement : un centrage vertical ou horizontal est donc requis.
- • Les angles, les arêtes, les arrondis doivent être impeccables et ne doivent pas subir d'abruptes changements de direction.
- • Le SVG ne doit contenir aucune couleur, elles seront ajoutées si nécessaire en CSS