feature #1530 Use Symfony UX Icons (javiereguiluz)

This PR was squashed before being merged into the main branch.

Discussion
----------

Use Symfony UX Icons

Let's start using more UX packages in this project. I propose to use Tabler icons because we use them in all Symfony websites, in the Symfony Profiler and Toolbar, etc.

I'm pinging `@smnandre` and `@Kocal` because I have a question. I had to apply these attributes by default:

```yaml
ux_icons:
    default_icon_attributes:
        width: 1.2em
        height: 1.2em
        style: 'position: relative; top: -2px;'
```

If I don't, the icons look very small and not aligned vertically:

* The alignment is ideally solved by using `flex` in buttons and other elements that display icons + text. Since I'd like to add Twig Components here, I prefer to not change HTML/CSS much and instead, apply these attributes as a trade-off until we solve this in a better way.
* About the small icon size, I don't know why they look so small with the default `1em`. Any help is appreciated.

Thanks!

Commits
-------

986f239 Use Symfony UX Icons

assets/app.js

@@ -1,8 +1,6 @@
 // start the Stimulus application
 import './bootstrap.js';
 import './styles/app.scss';
-import '@fortawesome/fontawesome-free/css/all.css';
-import '@fortawesome/fontawesome-free/css/v4-shims.css';
 import 'highlight.js/styles/github-dark-dimmed.css';
 import 'lato-font/css/lato-font.css';
 

assets/styles/app.scss

@@ -268,7 +268,7 @@ footer {
   padding-bottom: 2em
 }
 
-footer p {
+footer p, footer a {
   color: var(--gray-700);
   font-size: 13px;
   margin-bottom: 0.25em
@@ -278,9 +278,7 @@ footer #footer-resources {
   text-align: right
 }
 
-footer #footer-resources i {
-  color: var(--gray-700);
-  font-size: 28.5px;
+footer #footer-resources svg {
   margin-left: 0.5em
 }
 

composer.json

@@ -42,6 +42,7 @@
         "symfony/string": "^7",
         "symfony/translation": "^7",
         "symfony/twig-bundle": "^7",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.6",
         "symfony/validator": "^7",
         "symfony/yaml": "^7",

config/bundles.php

@@ -17,4 +17,5 @@
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
     Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
     Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

config/packages/ux_icons.yaml

@@ -0,0 +1,8 @@
+ux_icons:
+    default_icon_attributes:
+        width: 1.2em
+        height: 1.2em
+        style: 'position: relative; top: -2px;'
+
+    aliases:
+        'tabler:save-changes': 'tabler:device-floppy'

importmap.php

@@ -71,18 +71,10 @@
         'version' => '11.9.0',
         'type' => 'css',
     ],
-    '@fortawesome/fontawesome-free/css/all.css' => [
-        'version' => '6.5.1',
-        'type' => 'css',
-    ],
     'lato-font/css/lato-font.css' => [
         'version' => '3.0.0',
         'type' => 'css',
     ],
-    '@fortawesome/fontawesome-free/css/v4-shims.css' => [
-        'version' => '6.5.1',
-        'type' => 'css',
-    ],
     'popper.js' => [
         'version' => '1.16.1',
     ],

templates/admin/blog/_delete_form.html.twig

@@ -2,7 +2,7 @@
 <form action="{{ url('admin_post_delete', {id: post.id}) }}" method="post" data-confirmation="true" id="delete-form">
     <input type="hidden" name="token" value="{{ csrf_token('delete') }}" />
     <button type="submit" class="btn btn-block btn-danger">
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <twig:ux:icon name="tabler:trash"/>
         {{ 'action.delete_post'|trans }}
     </button>
 </form>

templates/admin/blog/_form.html.twig

@@ -15,12 +15,12 @@
     {{ form_widget(form) }}
 
     <button type="submit" class="{{ button_css|default("btn btn-primary") }}">
-        <i class="fa fa-save" aria-hidden="true"></i> {{ button_label|default('label.create_post'|trans) }}
+        <twig:ux:icon name="tabler:save-changes"/> {{ button_label|default('label.create_post'|trans) }}
     </button>
 
     {% if include_back_to_home_link|default(false) %}
         <a href="{{ path('admin_post_index') }}" class="btn btn-link">
-            <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'action.back_to_list'|trans }}
+            <twig:ux:icon name="tabler:list"/> {{ 'action.back_to_list'|trans }}
         </a>
     {% endif %}
 {{ form_end(form) }}

templates/admin/blog/edit.html.twig

@@ -15,7 +15,7 @@
 {% block sidebar %}
     <div class="section">
         <a href="{{ path('admin_post_show', {id: post.id}) }}" class="btn btn-lg btn-block btn-success">
-            <i class="fa fa-eye" aria-hidden="true"></i> {{ 'action.show_post'|trans }}
+            <twig:ux:icon name="tabler:eye"/> {{ 'action.show_post'|trans }}
         </a>
     </div>
 

templates/admin/blog/index.html.twig

@@ -9,8 +9,8 @@
         <thead>
             <tr>
                 <th scope="col">{{ 'label.title'|trans }}</th>
-                <th scope="col"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'label.published_at'|trans }}</th>
-                <th scope="col" class="text-center"><i class="fa fa-cogs" aria-hidden="true"></i> {{ 'label.actions'|trans }}</th>
+                <th scope="col"><twig:ux:icon name="tabler:calendar-month"/> {{ 'label.published_at'|trans }}</th>
+                <th scope="col" class="text-center"><twig:ux:icon name="tabler:settings"/> {{ 'label.actions'|trans }}</th>
             </tr>
         </thead>
         <tbody>
@@ -24,11 +24,11 @@
                 <td class="text-right">
                     <div class="item-actions">
                         <a href="{{ path('admin_post_show', {id: post.id}) }}" class="btn btn-sm btn-secondary">
-                            <i class="fa fa-eye" aria-hidden="true"></i> {{ 'action.show'|trans }}
+                            <twig:ux:icon name="tabler:eye"/> {{ 'action.show'|trans }}
                         </a>
 
                         <a href="{{ path('admin_post_edit', {id: post.id}) }}" class="btn btn-sm btn-primary">
-                            <i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit'|trans }}
+                            <twig:ux:icon name="tabler:pencil"/> {{ 'action.edit'|trans }}
                         </a>
                     </div>
                 </td>
@@ -45,7 +45,7 @@
 {% block sidebar %}
     <div class="section actions">
         <a href="{{ path('admin_post_new') }}" class="btn btn-lg btn-block btn-success">
-            <i class="fa fa-plus" aria-hidden="true"></i> {{ 'action.create_post'|trans }}
+            <twig:ux:icon name="tabler:pencil"/> {{ 'action.create_post'|trans }}
         </a>
     </div>
 

templates/admin/blog/new.html.twig

@@ -13,11 +13,11 @@
         {{ form_row(form.tags) }}
 
         <button type="submit" class="btn btn-primary">
-            <i class="fa fa-save" aria-hidden="true"></i> {{ 'label.create_post'|trans }}
+            <twig:ux:icon name="tabler:save-changes"/> {{ 'label.create_post'|trans }}
         </button>
         {{ form_widget(form.saveAndCreateNew, {label: 'label.save_and_create_new', attr: {class: 'btn btn-primary'}}) }}
         <a href="{{ path('admin_post_index') }}" class="btn btn-link">
-            <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'action.back_to_list'|trans }}
+            <twig:ux:icon name="tabler:list"/> {{ 'action.back_to_list'|trans }}
         </a>
     {{ form_end(form) }}
 {% endblock %}

templates/admin/blog/show.html.twig

@@ -6,8 +6,8 @@
     <h1>{{ post.title }}</h1>
 
     <p class="post-metadata">
-        <span class="metadata"><i class="fa fa-calendar"></i> {{ post.publishedAt|format_datetime('long', 'medium', '', 'UTC') }}</span>
-        <span class="metadata"><i class="fa fa-user"></i> {{ post.author.fullName }}</span>
+        <span class="metadata"><twig:ux:icon name="tabler:calendar-month"/> {{ post.publishedAt|format_datetime('long', 'medium', '', 'UTC') }}</span>
+        <span class="metadata"><twig:ux:icon name="tabler:user"/> {{ post.author.fullName }}</span>
     </p>
 
     <div class="jumbotron">
@@ -22,7 +22,7 @@
 {% block sidebar %}
     <div class="section">
         <a href="{{ path('admin_post_edit', {id: post.id}) }}" class="btn btn-lg btn-block btn-success">
-            <i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit_contents'|trans }}
+            <twig:ux:icon name="tabler:pencil"/> {{ 'action.edit_contents'|trans }}
         </a>
     </div>
 

templates/admin/layout.html.twig

@@ -15,12 +15,12 @@
 {% block header_navigation_links %}
     <li class="nav-item{{ _route in ['admin_index', 'admin_post_index'] ? ' active' : '' }}">
         <a class="nav-link" href="{{ path('admin_post_index') }}">
-            <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'menu.post_list'|trans }}
+            <twig:ux:icon name="tabler:list"/> {{ 'menu.post_list'|trans }}
         </a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="{{ path('blog_index') }}">
-            <i class="fa fa-home" aria-hidden="true"></i> {{ 'menu.back_to_blog'|trans }}
+            <twig:ux:icon name="tabler:home"/> {{ 'menu.back_to_blog'|trans }}
         </a>
     </li>
 {% endblock %}