Use Symfony UX Icons

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.1.*",
         "symfony/translation": "7.1.*",
         "symfony/twig-bundle": "7.1.*",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.6",
         "symfony/validator": "7.1.*",
         "symfony/yaml": "7.1.*",

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'

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>