Symfony ux:icons - Added Icons.

assets/icons/symfony.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><circle cx="128" cy="128.827" r="128" fill="#1a171b"/><path fill="#fff" d="M183.706 48.124c-12.986.453-24.32 7.61-32.757 17.51c-9.342 10.855-15.557 23.73-20.035 36.872c-8.01-6.565-14.19-15.064-27.041-18.77c-9.933-2.852-20.366-1.674-29.96 5.474c-4.545 3.395-7.676 8.527-9.165 13.351c-3.855 12.537 4.053 23.694 7.645 27.7l7.853 8.416c1.619 1.65 5.518 5.955 3.612 12.127c-2.06 6.71-10.15 11.055-18.448 8.495c-3.706-1.13-9.03-3.891-7.838-7.779c.493-1.59 1.631-2.78 2.241-4.155c.56-1.181.827-2.067.997-2.587c1.516-4.95-.555-11.39-5.857-13.025c-4.946-1.516-10.007-.315-11.969 6.054c-2.225 7.235 1.237 20.366 19.783 26.084c21.729 6.676 40.11-5.155 42.717-20.586c1.642-9.665-2.722-16.845-10.717-26.08l-6.514-7.204c-3.946-3.942-5.301-10.661-1.217-15.825c3.446-4.356 8.354-6.215 16.392-4.029c11.733 3.186 16.963 11.327 25.69 17.893c-3.603 11.819-5.958 23.682-8.09 34.32l-1.299 7.931c-6.238 32.721-11 50.688-23.375 61.003c-2.493 1.773-6.057 4.427-11.429 4.612c-2.816.087-3.726-1.85-3.765-2.694c-.067-1.977 1.599-2.883 2.706-3.773c1.654-.902 4.155-2.398 3.985-7.191c-.18-5.664-4.872-10.575-11.654-10.35c-5.08.173-12.823 4.954-12.532 13.705c.303 9.039 8.728 15.813 21.43 15.384c6.79-.233 21.952-2.997 36.895-20.76c17.392-20.362 22.256-43.705 25.915-60.79l4.084-22.556c2.269.272 4.695.453 7.334.516c21.661.457 32.496-10.763 32.657-18.924c.107-4.939-3.241-9.799-7.928-9.689c-3.355.095-7.57 2.328-8.582 6.968c-.988 4.552 6.893 8.66.733 12.65c-4.376 2.832-12.221 4.828-23.269 3.206l2.009-11.103c4.1-21.055 9.157-46.954 28.341-47.584c1.398-.071 6.514.063 6.633 3.446c.035 1.13-.245 1.418-1.568 4.005c-1.347 2.017-1.855 3.734-1.792 5.707c.185 5.376 4.273 8.909 10.185 8.696c7.916-.256 10.193-7.963 10.063-11.921c-.32-9.3-10.122-15.175-23.1-14.75"/></svg>

assets/resources/bug-off.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-off"><path d="M15 7.13V6a3 3 0 0 0-5.14-2.1L8 2"/><path d="M14.12 3.88 16 2"/><path d="M22 13h-4v-2a4 4 0 0 0-4-4h-1.3"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="m2 2 20 20"/><path d="M7.7 7.7A4 4 0 0 0 6 11v3a6 6 0 0 0 11.13 3.13"/><path d="M12 20v-8"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/></svg>

assets/resources/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>

assets/resources/coffee.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-coffee"><path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/></svg>

assets/resources/x.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

composer.json

@@ -27,6 +27,7 @@
         "symfony/flex": "^2",
         "symfony/form": "7.3.*",
         "symfony/framework-bundle": "7.3.*",
+        "symfony/http-client": "7.3.*",
         "symfony/mime": "7.3.*",
         "symfony/monolog-bundle": "^3.10",
         "symfony/property-access": "7.3.*",
@@ -35,6 +36,8 @@
         "symfony/security-bundle": "7.3.*",
         "symfony/serializer": "7.3.*",
         "symfony/twig-bundle": "7.3.*",
+        "symfony/ux-icons": "^2.25",
+        "symfony/ux-twig-component": "^2.25",
         "symfony/validator": "7.3.*",
         "symfony/var-exporter": "7.3.*",
         "symfony/yaml": "7.3.*",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a91ab8a2a6068ca939b60f094391e590",
+    "content-hash": "88be6cb5377f9663ef2e3ff4dd3c034c",
     "packages": [
         {
             "name": "composer/semver",
@@ -6848,6 +6848,95 @@
             ],
             "time": "2025-05-24T14:28:13+00:00"
         },
+        {
+            "name": "symfony/ux-icons",
+            "version": "v2.25.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-icons.git",
+                "reference": "430b2753aa55a46baa001055bf7976b62bc96942"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-icons/zipball/430b2753aa55a46baa001055bf7976b62bc96942",
+                "reference": "430b2753aa55a46baa001055bf7976b62bc96942",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/framework-bundle": "^6.4|^7.0",
+                "symfony/twig-bundle": "^6.4|^7.0"
+            },
+            "conflict": {
+                "symfony/flex": "<1.13",
+                "symfony/ux-twig-component": "<2.21"
+            },
+            "require-dev": {
+                "psr/log": "^2|^3",
+                "symfony/asset-mapper": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/http-client": "6.4|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0",
+                "symfony/ux-twig-component": "^2.14",
+                "zenstruck/console-test": "^1.5"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/ux",
+                    "name": "symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\Icons\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Kevin Bond",
+                    "email": "[email protected]"
+                },
+                {
+                    "name": "Simon André",
+                    "email": "[email protected]"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Renders local and remote SVG icons in your Twig templates.",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "icons",
+                "svg",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-icons/tree/v2.25.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2025-04-07T13:54:07+00:00"
+        },
         {
             "name": "symfony/ux-twig-component",
             "version": "v2.25.2",

config/bundles.php

@@ -14,4 +14,5 @@ return [
     Nelmio\ApiDocBundle\NelmioApiDocBundle::class => ['all' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

config/packages/ux_icons.yaml

@@ -0,0 +1,24 @@
+ux_icons:
+  # The local directory where icons are stored
+  icon_dir: "%kernel.project_dir%/assets/icons"
+
+  # Default attributes to add to all icons
+  default_icon_attributes:
+    width: "1.25em"
+
+  # Icon aliases (alias => icon name)
+  aliases:
+    "tabler:save": "tabler:device-floppy"
+
+  # Configuration for the "on demand" icons powered by Iconify.design
+  iconify:
+    enabled: true
+
+    # Whether to use the "on demand" icons powered by Iconify.design
+    on_demand: true
+
+    # The endpoint for the Iconify API
+    endpoint: "https://api.iconify.design"
+
+  # Whether to ignore errors when an icon is not found
+  ignore_not_found: true

samples/SampleBedTypes.json

@@ -1,10 +1,10 @@
 [
     {
         "name": "Double Bed",
-        "iconUrl": "icon-bed-double"
+        "iconUrl": "lucide:bed-double"
     },
     {
         "name": "Single Bed",
-        "iconUrl": "icon-bed-single"
+        "iconUrl": "lucide:bed-single"
     }
 ]

src/Controller/Admin/BedTypeCrudController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller\Admin;
 
+use App\Controller\Admin\Field\IconField;
 use App\Entity\BedType;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
 use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
@@ -17,6 +18,6 @@ class BedTypeCrudController extends AbstractCrudController
     public function configureFields(string $pageName): iterable
     {
         yield TextField::new('name');
-        yield UrlField::new('iconUrl');
+        yield IconField::new('iconUrl');
     }
 }

src/Controller/Admin/Field/IconField.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Controller\Admin\Field;
+
+use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface;
+use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+
+final class IconField implements FieldInterface
+{
+    use FieldTrait;
+
+    /**
+     * @param TranslatableInterface|string|false|null $label
+     */
+    public static function new(string $propertyName, $label = null): self
+    {
+        return (new self())
+            ->setProperty($propertyName)
+            ->setLabel($label)
+
+            // this template is used in 'index' and 'detail' pages
+            ->setTemplatePath('admin/field/icon.html.twig')
+
+            // this is used in 'edit' and 'new' pages to edit the field contents
+            // you can use your own form types too
+            ->setFormType(TextType::class)
+            ->addCssClass('field-icon')
+
+            // these methods allow to define the web assets loaded when the
+            // field is displayed in any CRUD page (index/detail/edit/new)
+            //->addCssFiles('admin/field/field-icon.css')
+            //->addJsFiles('admin/field/field-icon.js')
+        ;
+    }
+}

symfony.lock

@@ -233,6 +233,18 @@
             "ref": "0df5844274d871b37fc3816c57a768ffc60a43a5"
         }
     },
+    "symfony/ux-icons": {
+        "version": "2.25",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.17",
+            "ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5"
+        },
+        "files": [
+            "./assets/icons/symfony.svg"
+        ]
+    },
     "symfony/ux-twig-component": {
         "version": "2.25",
         "recipe": {

templates/admin/field/icon.html.twig

@@ -0,0 +1,18 @@
+{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
+{# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
+{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
+{% if ea.crud.currentAction == 'detail' %}
+<div class="field-icon-div d-flex gap-3">
+    <span title="{{ field.value }}">{{ field.formattedValue|raw }}</span>
+    <div class="badge text-bg-secondary">
+        <twig:ux:icon name="{{ field.value }}" style="width: 1.25em;" />
+    </div>
+</div>
+{% else %}
+<div class="field-icon-div d-flex gap-3">
+    <span title="{{ field.value }}">{{ field.formattedValue|raw }}</span>
+    <div class="badge text-bg-secondary">
+        <twig:ux:icon name="{{ field.value }}" style="width: 1.25em;" />
+    </div>
+</div>
+{% endif %}

templates/app_setup/result.html.twig

@@ -8,9 +8,9 @@
     <h1>SomniaRooms - Set-Up!</h1>
 
     {% if isError %}
-    <img src="{{ asset('resources/x.svg') }}" />
+    <twig:ux:icon name="lucide:x" style="width: 3em;" />
     {% else %}
-    <img src="{{ asset('resources/coffee.svg') }}" />
+    <twig:ux:icon name="lucide:coffee" style="width: 3em;" />
     {% endif %}