Symfony UX Icons : Du SVG en une ligne de code

Introduction

Symfony UX est une révolution pour les développeurs Symfony. Fini la complexité du front-end, Symfony UX simplifie tout. Découvrez comment intégrer des icônes SVG en une ligne de code.

Un projet de démo

Pour illustrer ces nouveautés, nous allons utiliser un projet vierge Symfony 7.1.

symfony new demo-ux --webapp
cd demo-ux
symfony serve -d

1. Symfony UX Icons

Le package Symfony UX Icons propose une méthode simple pour intégrer des icônes SVG dans les applications Symfony.

En utilisant une fonction Twig, il permet d’inclure des icônes provenant de sources locales ou distantes, et offre un accès direct à plus de 200 000 icônes de collections populaires telles que FontAwesome, Bootstrap Icons et Google Material Design Icons.

Installons le package :

composer require symfony/ux-icons

Créons un contrôleur pour tester le bundle :

symfony console make:controller Icon

Recherchons les “set” d’icônes disponibles :

symfony console ux:icons:search fa # fa pour FontAwesome

 ------------------------ ------- ------------------- ------------- ------------------------
  Icon set                 Icons   License             Prefix        Example
 ------------------------ ------- ------------------- ------------- ------------------------
  Font Awesome Solid        1392   CC BY 4.0           fa6-solid     fa6-solid:location-pin
  Font Awesome Regular       163   CC BY 4.0           fa6-regular   fa6-regular:message
  Font Awesome Brands        490   CC BY 4.0           fa6-brands    fa6-brands:strava
  FontAudio                  155   CC BY 4.0           fad           fad:shuffle
  Font Awesome 5 Solid      1001   CC BY 4.0           fa-solid      fa-solid:search-plus
  Font Awesome 5 Regular     151   CC BY 4.0           fa-regular    fa-regular:bell
  Font Awesome 5 Brands      457   CC BY 4.0           fa-brands     fa-brands:amazon
  Font Awesome 4             678   Open Font License   fa            fa:wrench
 ------------------------ ------- ------------------- ------------- ------------------------

On peut même rechercher dans une seule collection :

symfony console ux:icons:search tabler user

Searching Tabler Icons icons "user"...
Found 39 icons.
 ------------------------------------------ ------------------------------------------
  tabler:calendar-user                       tabler:message-circle-user
  tabler:message-user                        tabler:password-user
  tabler:user                                tabler:user-bolt
  tabler:user-cancel                         tabler:user-check
  tabler:user-circle                         tabler:user-code
  tabler:user-cog                            tabler:user-dollar
  tabler:user-down                           tabler:user-edit
  tabler:user-exclamation                    tabler:user-filled
  tabler:user-heart                          tabler:user-hexagon
  tabler:user-minus                          tabler:user-off
  tabler:user-pause                          tabler:user-pentagon
  tabler:user-pin                            tabler:user-plus
 ------------------------------------------ ------------------------------------------

Magnifique, non ? Ne nous reste plus qu’à les utiliser dans notre template Twig :

{% extends 'base.html.twig' %}

{% block title %}Hello IconController!{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="example-wrapper">
    {{ ux_icon('tabler:message-circle-user') }}
</div>
{% endblock %}

C’est tout ! Vous avez maintenant un magnifique icône SVG dans votre page.

Besion de fixer la taille de l’icône ? Aucun problème :

{{ ux_icon('tabler:message-circle-user', {height: '50px', width: '50px' } ) }}

Bonus, pour chercher vos icones hyper simplement et visuellement, vous pouvez utiliser la page dédiée https://ux.symfony.com/icons.

2. Option “Twig Component”

Vous pouvez également utiliser des composants Twig pour afficher des icônes SVG en lieu et place de la fonction ux_icon.

Il vous faut au préalable installer le package symfony/ux-twig-component :

composer require symfony/ux-twig-component

Ensuite, vous pouvez utiliser le composant Twig ux:icon :

<twig:ux:icon name="flowbite:user-solid" />

C’est une alternative à la fonction ux_icon qui peut être plus pratique dans certains cas, et peut être plus lisible dans vos templates ?

Conclusion

Symfony UX Icons est un bundle qui simplifie grandement l’intégration d’icônes SVG dans vos applications Symfony. Il offre un accès direct à plus de 200 000 icônes de collections populaires telles que FontAwesome, Bootstrap Icons et Google Material Design Icons.

Bref, plus d’excuses pour ne pas avoir de jolies icônes dans vos applications Symfony !