[Ux icon] Add tests icons

composer.json

@@ -21,6 +21,7 @@
         "symfony/stopwatch": "^6.4",
         "symfony/translation": "^6.4",
         "symfony/twig-bundle": "^6.4",
+        "symfony/ux-icons": "^2.32",
         "symfony/validator": "^6.4",
         "symfony/webpack-encore-bundle": "^2.0",
         "symfony/yaml": "^6.4"

config/bundles.php

@@ -8,4 +8,5 @@
     KevinPapst\TablerBundle\TablerBundle::class => ['all' => true],
     Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

config/packages/ux_icons.yaml

@@ -0,0 +1,22 @@
+# Full configuration reference: https://symfony.com/bundles/ux-icons/current/index.html#configuration
+ux_icons:
+    aliases:
+        about: 'fa7-solid:info-circle'
+
+    # Default HTML attributes to add to all icons
+    default_icon_attributes:
+
+        # Use current text color to fill the icon
+        fill: currentColor
+
+        # Default dimensions
+        height: '1em'
+        width: '1em'
+
+    # Throw an exception if an icon is not
+    ignore_not_found: false
+
+when@prod:
+    ux_icons:
+        # Suppress exceptions for missing icons in production
+        ignore_not_found: true

src/Controller/AddonsController.php

@@ -0,0 +1,24 @@
+<?php
+
+/*
+ * This file is part of the Tabler-Bundle demo.
+ * Copyright 2021 Kevin Papst - www.kevinpapst.de
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class AddonsController extends AbstractController
+{
+    #[Route('/icons', name: 'icons')]
+    public function icons(): Response
+    {
+        return $this->render('addons/icons.html.twig');
+    }
+}

src/EventSubscriber/MenuBuilderSubscriber.php

@@ -32,7 +32,7 @@ public static function getSubscribedEvents(): array
     public function onSetupNavbar(MenuEvent $event): void
     {
         $event->addItem(
-            new MenuItemModel('homepage', 'homepage', 'homepage', [], 'fas fa-tachometer-alt')
+            new MenuItemModel('homepage', 'homepage', 'homepage', [], 'tabler:home')
         );
 
         $forms = new MenuItemModel('forms', 'Forms', null, [], 'fab fa-wpforms');
@@ -106,6 +106,12 @@ public function onSetupNavbar(MenuEvent $event): void
         $docu->setBadgeColor('blue');
         $event->addItem($docu);
 
+        $addons = new MenuItemModel('addons', 'Addons');
+        $addons->addChild(
+            new MenuItemModel('icons', 'Icons', 'icons')
+        );
+        $event->addItem($addons);
+
         if (!$this->security->isGranted('IS_AUTHENTICATED')) {
             $event->addItem(
                 new MenuItemModel('login', 'login', 'security_login', [], 'fas fa-sign-in-alt')

symfony.lock

@@ -224,6 +224,19 @@
             "ref": "f75ac166398e107796ca94cc57fa1edaa06ec47f"
         }
     },
+    "symfony/ux-icons": {
+        "version": "2.32",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.19",
+            "ref": "c965ca0bf8a40e03420d57e08cff0bf6045e4ae7"
+        },
+        "files": [
+            "assets/icons/symfony.svg",
+            "config/packages/ux_icons.yaml"
+        ]
+    },
     "symfony/validator": {
         "version": "5.4",
         "recipe": {

templates/addons/icons.html.twig

@@ -0,0 +1,53 @@
+{% extends 'layout.html.twig' %}
+
+{% block page_content %}
+    {% embed '@Tabler/embeds/card.html.twig' with {fullsize : false} %}
+        {% block box_title %}Interface icons{% endblock %}
+        {% block box_body %}
+            <div class="card">
+                <table class="table table-vcenter card-table">
+                    <thead>
+                    <tr>
+                        <th>Type</th>
+                        <th>Alias</th>
+                        <th>Ux icon fullName</th>
+                        <th>Fontawesome name</th>
+                        <th>Fontawesome fullName</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr class="bg-primary-lt">
+                        <td>Values</td>
+                        <td><code>about</code></td>
+                        <td><code>fa7-solid:info-circle</code></td>
+                        <td><code>fa-info-circle</code></td>
+                        <td><code>fas fa-info-circle</code></td>
+                    </tr>
+                    <tr>
+                        <td>Ux icon</td>
+                        <td>{{ ux_icon('about') }}</td>
+                        <td>{{ ux_icon('fa7-solid:info-circle') }}</td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td>NEW tabler_icon</td>
+                        <td>{{ tabler_icon('about', true) }}</td>
+                        <td>{{ tabler_icon('fa7-solid:info-circle', true) }}</td>
+                        <td>{{ tabler_icon('fa-info-circle', true) }}</td>
+                        <td>{{ tabler_icon('fas fa-info-circle', true) }}</td>
+                    </tr>
+                    <tr>
+                        <td>Manual</td>
+                        <td>{{ ux_icon('tabler:forms') }}</td>
+                        <td>{{ tabler_icon('forms') }}</td>
+                        <td>{{ tabler_icon('tabler:forms') }}</td>
+                        <td>{{ tabler_icon('tabler:forms', true) }}</td>
+                        <td></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        {% endblock %}
+    {% endembed %}
+{% endblock %}