Icônes
Si l'icône s'affiche mal
- Tester https://jakearchibald.github.io/svgomg/ (paramètres par défaut)
- Tester inkscape : Je sélectionne toute les formes, menu "Chemin > Contour en chemin", je sauvegarde et teste
- Tester inkscape : Si ça marche toujours pas, menu "Chemin > Union" et en général, ça passe
Quel format
Web font
- Indépendantes au niveau de la résolution, mais un peu moins de bonne qualité qu'un svg ?
- Les lecteurs d'écran vont lire l'icône en unicode uniquement si c'est en dessous d'un range de e600. Si c'est supérieux, ce ne sera pas lu par le lecteur d'écran.
- Utiliser aria-hidden sinon
- En dehors de vieux IE, un .ttf est suffisant pour une font
- Les pages sont rendues plus rapidement avec des fonts icons : http://blog.nparashuram.com/2015/05/icons-font-inline-svg-or-background-svgs.html#svg-perf-test-results
- Comment ? génération avec grunt, gulp
SVG
- Pour supporter tous les navigateurs, il faut un script https://github.com/jonathantneal/svg4everybody (IE)
- Plus accessibles
Composant JS
Composant d'un framework (Angular, react, vue)
Articles
- https://css-tricks.com/icon-fonts-vs-svg/
- Icon fonts
- https://putaindecode.io/articles/creez-vos-iconfonts-avec-gulp-iconfont/
- https://varya.me/en/posts/dealing-atomically-with-icon-fonts/
- https://www.ux-republic.com/iconfont-generation-via-gulp-js/
- https://markgoodyear.com/2014/01/getting-started-with-gulp/
- https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/
- https://benfrain.com/seriously-use-icon-fonts/
- https://www.thirdandgrove.com/insights/creating-iconfont-gulp/
- SVG