[BootstrapAdminUi] Symfony UX icons for admin panel (#118)

Based on Sylius/Sylius#17328

app/Grid/ConferenceGrid.php

@@ -77,7 +77,7 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void
             ->addActionGroup(
                 ItemActionGroup::create(
                     Action::create('show_talks', 'show')
-                        ->setIcon('list_letters')
+                        ->setIcon('tabler:list-letters')
                         ->setLabel('app.ui.show_talks')
                         ->setOptions([
                             'link' => [

app/Grid/SpeakerGrid.php

@@ -70,7 +70,7 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void
             ->addActionGroup(
                 ItemActionGroup::create(
                     Action::create('show_talks', 'show')
-                        ->setIcon('list_letters')
+                        ->setIcon('tabler:list-letters')
                         ->setLabel('app.ui.show_talks')
                         ->setOptions([
                             'link' => [

app/Menu/AdminMenuBuilder.php

@@ -33,7 +33,7 @@ public function createMenu(array $options): ItemInterface
                 'route' => 'sylius_admin_ui_dashboard',
             ])
             ->setLabel('sylius.ui.dashboard')
-            ->setLabelAttribute('icon', 'dashboard')
+            ->setLabelAttribute('icon', 'tabler:dashboard')
         ;
 
         $this->addLibrarySubMenu($menu);
@@ -47,7 +47,7 @@ private function addLibrarySubMenu(ItemInterface $menu): void
         $library = $menu
             ->addChild('library')
             ->setLabel('app.ui.library')
-            ->setLabelAttribute('icon', 'users')
+            ->setLabelAttribute('icon', 'tabler:users')
         ;
 
         $library->addChild('books', ['route' => 'app_admin_book_index'])
@@ -61,7 +61,7 @@ private function addConfigurationSubMenu(ItemInterface $menu): void
         $configuration = $menu
             ->addChild('configuration')
             ->setLabel('app.ui.configuration')
-            ->setLabelAttribute('icon', 'dashboard')
+            ->setLabelAttribute('icon', 'tabler:dashboard')
             ->setExtra('always_open', true)
         ;
 

composer.json

@@ -28,12 +28,14 @@
         "symfony/config": "^6.4 || ^7.0",
         "symfony/dependency-injection": "^6.4 || ^7.0",
         "symfony/expression-language": "^6.4 || ^7.0",
+        "symfony/http-client": "^6.4 || ^7.0",
         "symfony/http-kernel": "^6.4 || ^7.0",
         "symfony/security-bundle": "^6.4 || ^7.0",
         "symfony/security-http": "^6.4 || ^7.0",
         "symfony/stopwatch": "^6.4 || ^7.0",
         "symfony/twig-bundle": "^6.4 || ^7.0",
         "symfony/ux-autocomplete": "^2.17",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.17",
         "symfony/ux-twig-component": "^2.17",
         "twig/twig": "^2.15 || ^3.0",

config/bundles.php

@@ -24,4 +24,5 @@
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
     Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

src/BootstrapAdminUi/assets/styles/_icons.scss

@@ -0,0 +1,3 @@
+svg.icon * {
+    stroke-width: 1.5;
+}

src/BootstrapAdminUi/assets/styles/main.scss

@@ -20,6 +20,7 @@ body {
 @import "alert";
 @import "datatable";
 @import "form";
+@import "icons";
 @import "sidebar";
 @import "tom-select";
 

src/BootstrapAdminUi/composer.json

@@ -12,8 +12,10 @@
         "sylius/twig-hooks": "^0.6",
         "symfony/asset": "^6.4 || ^7.0",
         "symfony/http-kernel": "^6.4 || ^7.0",
+        "symfony/http-client": "^6.4 || ^7.0",
         "symfony/security-bundle": "^6.4 || ^7.0",
         "symfony/ux-autocomplete": "^2.17",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.17"
     },
     "require-dev": {

src/BootstrapAdminUi/config/app/icon/ux/icons.php

@@ -0,0 +1,22 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Symfony\Component\DependencyInjection\Loader\Configurator;
+
+return static function (ContainerConfigurator $container): void {
+    $container->extension('ux_icons', [
+        'default_icon_attributes' => [
+            'class' => 'icon',
+        ],
+    ]);
+};

src/BootstrapAdminUi/src/Twig/Component/UserDropdownComponent.php

@@ -45,7 +45,7 @@ public function getMenuItems(): array
             [
                 'title' => 'sylius.ui.logout',
                 'url' => $this->routing['logout_path'] ?? $this->router->generate('sylius_admin_ui_logout'),
-                'icon' => 'logout',
+                'icon' => 'tabler:logout',
             ],
         ];
     }

src/BootstrapAdminUi/templates/shared/components/delete_modal.html.twig

@@ -1,12 +1,12 @@
 {% extends '@SyliusBootstrapAdminUi/shared/components/confirmation_modal.html.twig' %}
 {% import '@SyliusBootstrapAdminUi/shared/helper/button.html.twig' as button %}
 
-{% props id = null, path = null, label = 'sylius.ui.delete', icon = 'trash_x', disabled = false, form_attr = null, type = 'delete' %}
+{% props id = null, path = null, label = 'sylius.ui.delete', icon = 'tabler:trash-x', disabled = false, form_attr = null, type = 'delete' %}
 {% set modal_id = 'delete-modal-' ~ id %}
 
 {% block trigger %}
     <div data-bs-toggle="tooltip" data-bs-title="{{ label|trans }}">
-        {{ button.default({icon: icon, icon_class: 'icon icon-tabler text-danger', icon_only: true, disabled: disabled, attr: 'data-bs-toggle=modal data-bs-target=#' ~ modal_id }) }}
+        {{ button.default({icon: icon, icon_class: 'icon text-danger', icon_only: true, disabled: disabled, attr: 'data-bs-toggle=modal data-bs-target=#' ~ modal_id }) }}
     </div>
 {% endblock %}
 

src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig

@@ -1,7 +1,13 @@
 {% set session = _context.app.session|default(null) %}
 
 {% if session is not null and session.started %}
-    {% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
+    {% set icons = {
+        'success': 'tabler:circle-check',
+        'error': 'tabler:exclamation-circle',
+        'info': 'tabler:info-circle',
+        'warning': 'tabler:alert-triangle',
+    } %}
+
     <div class="container-xl mt-3" {{ sylius_test_html_attribute('sylius-flashes-container') }}>
         {% for type in ['success', 'error', 'info', 'warning'] %}
             {% for flash in session.flashbag.get(type) %}
@@ -13,7 +19,7 @@
                 >
                     <div class="d-flex">
                         <div>
-                            {{ icon({ icon: type == 'error' ? 'danger' : type }) }}
+                            {{ ux_icon(icons[type]) }}
                         </div>
                         <div class="mx-2">
                             <h4 class="alert-title">

src/BootstrapAdminUi/templates/shared/crud/common/content/form_error_alert.html.twig

@@ -1,12 +1,10 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% set form = hookable_metadata.context.form|default(null) %}
 
 {% if form is not null and form.vars.valid == false %}
     <div class="container-xl">
         <div class="sylius alert alert-danger" role="alert" {{ sylius_test_html_attribute('form-error-alert') }}>
             <div class="d-flex">
-                <div>{{ icon({ icon: 'danger' }) }}</div>
+                <div>{{ ux_icon('tabler:exclamation-circle') }}</div>
                 <div class="mx-2">
                     <h4 class="alert-title">{{ 'sylius.ui.error'|trans }}</h4>
                     <div class="text-secondary">{{ 'sylius.ui.this_form_contains_errors'|trans }}</div>

src/BootstrapAdminUi/templates/shared/crud/common/sidebar/menu/menu.html.twig

@@ -1,7 +1,5 @@
 {% extends 'knp_menu.html.twig' %}
 
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% block root %}
     <ul class="sidebar navbar-nav">
         {{ parent() }}
@@ -95,11 +93,11 @@
     {% set is_active = matcher.isCurrent(item) %}
 
     <a class="dropdown-item {{ is_active ? '' : 'text-muted' }} {% if attributes.class is defined %}{{ attributes.class }}{% endif %}" href="{{ item.uri }}" target="{{ target }}">
-        {{ item.label|trans }}{% if target == '_blank' %}{{ icon({ icon: 'external_link', class: 'icon icon-tabler icon-sm ms-1 mb-2 opacity-75' }) }}{% endif %}
+        {{ item.label|trans }}{% if target == '_blank' %}{{ ux_icon('tabler:external-link', {'class': 'icon icon-sm ms-1 mb-2 opacity-75'}) }}{% endif %}
     </a>
 {% endblock %}
 
 {% block icon %}
     {% set icon_name = item.labelAttribute('icon') %}
-    {% if icon_name %}{{ icon({ icon: icon_name }) }}{% endif %}
+    {% if icon_name %}{{ ux_icon(icon_name) }}{% endif %}
 {% endblock %}

src/BootstrapAdminUi/templates/shared/crud/common/sidebar/search.html.twig

@@ -1,7 +1,5 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 <div class="input-group ps-2 pt-2 pb-3 menu-search">
-    <button class="btn btn-sm" type="button" disabled data-menu-search-icon>{{ icon({icon: 'search', class: 'icon icon-tabler mx-1'}) }}</button>
-    <button class="btn btn-sm" type="button" data-menu-search-clear>{{ icon({icon: 'x', class: 'icon icon-tabler mx-1'}) }}</button>
+    <button class="btn btn-sm" type="button" disabled data-menu-search-icon>{{ ux_icon('tabler:search', {'class': 'icon mx-1'}) }}</button>
+    <button class="btn btn-sm" type="button" data-menu-search-clear>{{ ux_icon('tabler:x', {'class': 'icon mx-1'}) }}</button>
     <input class="form-control form-control-sm" placeholder="{{ 'sylius.ui.search_menu'|trans }}..." type="text" data-menu-search>
 </div>

src/BootstrapAdminUi/templates/shared/crud/index/content/grid/filters.html.twig

@@ -18,7 +18,7 @@
                     {% endfor %}
                 </div>
                 <div>
-                    {{ button.primary({ text: 'sylius.ui.filter'|trans, icon: 'adjustments', type: 'submit', attr: sylius_test_html_attribute('filter') }) }}
+                    {{ button.primary({ text: 'sylius.ui.filter'|trans, icon: 'tabler:adjustments', type: 'submit', attr: sylius_test_html_attribute('filter') }) }}
                     {{ button.default({ text: 'sylius.ui.reset'|trans, url: path, attr: sylius_test_html_attribute('reset') }) }}
                 </div>
             </form>
@@ -28,6 +28,6 @@
     {{ accordion([{
         title: 'sylius.ui.filters'|trans,
         content: content,
-        icon: 'adjustments',
+        icon: 'tabler:adjustments',
     }], are_criteria_set) }}
 </div>

src/BootstrapAdminUi/templates/shared/crud/index/content/grid/no_results/action.html.twig

@@ -1,9 +1,7 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% if _context.route is defined and (_context.hidden is not defined or _context.hidden == false) %}
     <div class="empty-action">
         <a href="{{ path(_context.route) }}" class="btn btn-primary">
-            {{ icon({ icon: _context.icon|default('plus') }) }}
+            {{ ux_icon(_context.icon|default('tabler:plus')) }}
             {{ _context.translation_key|default('sylius.ui.add_new_entry')|trans }}
         </a>
     </div>

src/BootstrapAdminUi/templates/shared/grid/action/create.html.twig

@@ -1,5 +1,3 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('create')), options.link.parameters|default([]))) %}
 
 {% set message = action.label %}
@@ -8,6 +6,6 @@
 {% endif %}
 
 <a href="{{ path }}" class="btn">
-    {{ icon({ icon: action.icon ?? 'plus', class: 'icon icon-tabler dropdown-item-icon' }) }}
+    {{ ux_icon(action.icon ?? 'tabler:plus', {'class': 'icon dropdown-item-icon'}) }}
     {{ message|trans }}
 </a>

src/BootstrapAdminUi/templates/shared/grid/action/delete.html.twig

@@ -1,5 +1,3 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% set id = options.link.parameters['id']|default(data.id)  %}
 
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('delete')), options.link.parameters|default({'id': id}))) %}

src/BootstrapAdminUi/templates/shared/grid/action/show.html.twig

@@ -1,8 +1,6 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('show')), options.link.parameters|default({'id': data.id}))) %}
 {% set message = action.label|default('sylius.ui.show') %}
 
 <a title="details" href="{{ path }}" class="btn btn-icon" data-bs-toggle="tooltip" data-bs-title="{{ message|trans }}" {{ sylius_test_html_attribute('show-action', message|trans ) }}>
-    {{ icon({ icon: action.icon|default('eye'), class: 'icon icon-tabler' }) }}
+    {{ ux_icon(action.icon|default('tabler:eye')) }}
 </a>

src/BootstrapAdminUi/templates/shared/grid/action/update.html.twig

@@ -1,8 +1,6 @@
-{% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('update')), options.link.parameters|default({'id': data.id}))) %}
 {% set message = action.label|default('sylius.ui.edit') %}
 
 <a href="{{ path }}" class="btn btn-icon" data-bs-toggle="tooltip" data-bs-title="{{ message|trans }}">
-    {{ icon({ icon: action.icon|default('pencil'), class: 'icon icon-tabler' }) }}
+    {{ ux_icon(action.icon|default('tabler:pencil')) }}
 </a>

src/BootstrapAdminUi/templates/shared/grid/bulk_action/delete.html.twig

@@ -7,7 +7,7 @@
         {{ button.delete({
             text: action.label|default('sylius.ui.delete')|trans,
             disabled: true,
-            icon: 'trash_x',
+            icon: 'tabler:trash-x',
             attr: 'data-check-all-action=index data-bs-toggle=modal data-bs-target=#delete-modal-bulk_delete',
         }) }}
     {% endblock %}

src/BootstrapAdminUi/templates/shared/helper/accordion.html.twig

@@ -1,6 +1,4 @@
 {% macro accordion(items, open = false, auto_close = null, flush = false) %}
-    {% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
     {% set auto_close = auto_close|default(true) %}
     {% set id = id|default(random()) %}
 
@@ -27,7 +25,7 @@
                                 <span class="flag flag-country-{{ item.flag }}"></span>
                             {% endif %}
                             {% if item.icon %}
-                                <span class="d-flex align-items-center">{{ icon({ icon: item.icon }) }}</span>
+                                <span class="d-flex align-items-center">{{ ux_icon(item.icon) }}</span>
                             {% endif %}
                             {{ item.title|default('Title') }}
                         </span>

src/BootstrapAdminUi/templates/shared/helper/avatar.html.twig

@@ -1,9 +1,7 @@
 {% macro default(img, class) %}
-    {% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
     <span class="sylius avatar {{ class }}" {% if img %} style="background-image: url({{ img }})" {% endif %}>
         {% if img is not defined or img is empty %}
-            {{ icon({ icon: 'user' }) }}
+            {{ ux_icon('tabler:user') }}
         {% endif %}
     </span>
 {% endmacro %}

src/BootstrapAdminUi/templates/shared/helper/button.html.twig

@@ -1,6 +1,4 @@
 {% macro default(params = {}) %}
-    {% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
     {% set params = {
         attr: null,
         class: null,
@@ -31,7 +29,7 @@
                 {% if params.disabled %}aria-disabled="true"{% endif %}
                 {% if params.dropdown %}data-bs-toggle="dropdown"{% endif %}
                 {{ params.attr is iterable ? block('attributes') : (params.attr ? ' ' ~ params.attr) }}>
-            {{ params.icon ? icon({ icon: params.icon, class: params.icon_class }) }}
+            {{ params.icon ? ux_icon(params.icon, {'class': params.icon_class|default('') }) }}
             {{ not params.icon_only ? params.text }}
         </a>
     {% else %}
@@ -42,7 +40,7 @@
                 {% if params.disabled %}disabled{% endif %}
                 {% if params.dropdown %}data-bs-toggle="dropdown"{% endif %}
                 {{ params.attr is iterable ? block('attributes') : (params.attr ? ' ' ~ params.attr) }}>
-            {{ params.icon ? icon({ icon: params.icon, class: params.icon_class }) }}
+            {{ params.icon ? ux_icon(params.icon, {'class': params.icon_class|default('') }) }}
             {{ not params.icon_only ? params.text }}
         </button>
     {% endif %}

src/BootstrapAdminUi/templates/shared/helper/dropdown.html.twig

@@ -1,6 +1,4 @@
 {% macro default(params) %}
-    {% import '@SyliusBootstrapAdminUi/shared/helper/button.html.twig' as button %}
-
     {% set params = {
         button: {},
         class: null,
@@ -26,8 +24,6 @@
 {% endmacro %}
 
 {% macro list(params, items) %}
-    {% from '@SyliusBootstrapAdminUi/shared/helper/icon.html.twig' import icon %}
-
     {% set content %}
         {% for item in items %}
             {% set item = {
@@ -43,7 +39,7 @@
             {% else %}
                 {% set extra_class = item.class ? ' ' ~ item.class %}
                 <a class="dropdown-item{{ item.class ? extra_class }}" href="{{ item.url }}" {{ sylius_test_html_attribute('user-dropdown-item', item.title|trans) }}>
-                    {{ item.icon ? icon({ icon: item.icon, class: 'icon dropdown-item-icon icon-tabler' ~ extra_class }) }}
+                    {{ item.icon ? ux_icon(item.icon, {'class': 'icon dropdown-item-icon ' ~ extra_class }) }}
                     {{ item.title|trans }}
                 </a>
             {% endif %}