Level 2 : Des icônes plein les yeux
Salut collègue développeuse/développeur,
Tout d'abord merci à tous pour vous êtes abonnés si nombreux dès cette première newsletter (presque 90 abonnés et 650 vues 🤩). J'espère répondre à un véritable besoin dans l'écosystème de Symfony.
Alors, c'est parti pour un second niveau de la newsletter Symfony Level Up !
Et si tu n’es pas encore abonné et que tu ne veux pas rater les prochaines éditions, clique sans plus tarder sur le bouton ci-dessous.
Quoi de neuf ?
Symfony UX continue à évoluer. La dernière nouveauté ? UX-icons !
Présentation
Ce nouveau composant de Sympony UX permet de charger des icônes (au format SVG) directement dans Twig. De plus, nous ne sommes pas ici sur un énième set de quelque centaines d'icônes, mais plutôt sur une agrégation géante de plus de 200000 icônes, provenant de + de 100 sources différentes (le tout basé sur l'API d'iconify)
Cerise sur le gâteau, il est également possible d'utiliser des icônes stockées en local pour se constituer son propre set.
Comment ça marche ?
Il suffit d'installer le package
composer require symfony/ux-icons
Puis dans Twig, utiliser le snippet {{ ux_icon()}}
Si rien n'est spécifié, l’Icône est recherchée par défaut dans le dossier assets/icons
{{ ux_icon('icon-name') }}
Pour récupérer une icône d'une librairie existante (Font-awesome, Bootstrap icon, Material, etc.) il faut préfixer le nom de l'icône par celui de l'éditeur. Et l’icône est récupérée sans avoir besoin de charger autre chose.
{{ ux_icon('material-symbols:check') }} {# check icon from Material #}
{{ ux_icon('bi:check') }} {# check icon from Bootstrap #}
{{ ux_icon('fa:check') }} {# check icon from FontAwesome#}
En second paramètre optionnel, il est possible de passer des attributs HTML pour venir enrichir l'affichage du SVG
{{ ux_icon('bi:check', {width: '16px', class: 'icon_class'}) }}
Pour ceux (comme moi) qui préfèrent une syntaxe plus proche d'HTML, la syntaxe alternative des composants est également disponible, et il est donc tout à fait possible d'écrire
<twig:UX:Icon name="bi:check" width="16" class="icon_class" />
Pour finir avec la touche DX qui va bien, il est possible de rechercher les noms d'icônes directement depuis la console avec la commande
php bin/console ux:icons:search icon_name
Mais pour une recherche un peu plus "user friendly", il y a également une superbe interface sur le site de Symfony UX, où tu pourras prévisualiser et comparer toutes les icônes en un clin d’oeil !
En conclusion, ce nouveau composant semble super bien pensé et fini, et devrait simplifier grandement l'utilisation des icônes, en évitant d'avoir à charger une ou plusieurs librairies externes, ou copier-coller de longs blocs de SVG dans Twig ce qui nuit à la lisibilité.
Bref, j'adoooore ❤️ ! Et toi ?
Vidéos
Les filtres Twig - 2min
J'ai récemment créé une petite série de vidéos courtes (je teste un nouveau format). Au programme, la découverte en ~1 à 2min de filtres Twig plus ou moins connus. Je te laisse découvrir celle sur le filtre batch que je trouve particulièrement intéressant.
N’hésite pas à me dire si tu aimes ce format très court :-)
Divers
Il y a quelques jours, la communauté Symfony a appris une triste nouvelle, Ryan Weaver -— l'un des principaux contributeurs de Symfony, et notamment Symfony UX —- et responsable de la plateforme Symfony Cast (qui n’est plus à présenter), a annoncé qu'il était atteint d'un cancer au cerveau 😕.
Une levée de fonds a été mise en place, permettant de récolter les 250 000$ nécessaire à une opération d'urgence (merci la communauté Symfony !). La cagnotte est toujours ouverte, alors si tu souhaites aider l’une des personnes les plus généreuses de la communauté, c'est par ici !
Good Luck Ryan 💪
Conclusion
Cette newsletter t'a plu, tu souhaites partager un article, un retour d'XP ou des idées d'améliorations ? ✉️ Écris-moi à levelup@sylvainblondeau.dev
Vous êtes une entreprise et souhaitez partager une offre d'emploi pour trouver votre futur développeur Symfony ?
✉️ Contactez-moi à jobs@sylvainblondeau.dev