[Site] Complete migration to UX Icons

Author: smnandre

ux.symfony.com/cookbook/component_architecture.md

@@ -33,7 +33,7 @@ In Symfony, you can have an `Alert` component, for example, with the following t
 
 ```twig
 <div class="alert alert-{{ type }}">
-    <twig:Icon name="{{ icon }}" />
+    <twig:ux:icon name="{{ icon }}" />
     {{ message }}
 </div>
 ```
@@ -43,9 +43,9 @@ Or you can compose with the following syntax:
 
 ```twig
 <twig:Card>
-    <twig:Icon name="info"/>
+    <twig:ux:icon name="info"/>
     <twig:Button>
-        <twig:Icon name="close" />
+        <twig:ux:icon name="close" />
     </twig:Button>
 </twig:Card>
 ```
@@ -79,7 +79,7 @@ We have the following template:
 {% props type, icon, message %}
 
 <div class="alert alert-{{ type }}">
-    <twig:Icon name="{{ icon }}" />
+    <twig:ux:icon name="{{ icon }}" />
     {{ message }}
 </div>
 ```

ux.symfony.com/src/UX/IconRenderer.php

@@ -0,0 +1,34 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\UX;
+
+use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
+use Symfony\Component\DependencyInjection\Attribute\AutowireDecorated;
+use Symfony\UX\Icons\IconRendererInterface;
+
+#[AsDecorator(decorates: '.ux_icons.icon_renderer')]
+class IconRenderer implements IconRendererInterface
+{
+    public function __construct(
+        #[AutowireDecorated]
+        private IconRendererInterface $inner,
+    ) {
+    }
+
+    public function renderIcon(string $name, array $attributes = []): string
+    {
+        return $this->inner->renderIcon($name, [
+            ...$attributes,
+            'class' => \sprintf('%s %s', 'Icon', $attributes['class'] ?? ''),
+        ]);
+    }
+}

ux.symfony.com/templates/_banner.html.twig

@@ -8,7 +8,7 @@
             </div>
             <div class="BannerAction">
                 <a href="https://gofund.me/44ecdba2" class="BannerButton" rel="external">
-                    <twig:Icon name="heart" aria-hidden="true"/>
+                    <twig:ux:icon name="heart" aria-hidden="true"/>
                     Donate
                 </a>
             </div>

ux.symfony.com/templates/_footer.html.twig

@@ -8,7 +8,7 @@
                        aria-label="Symfony UX on GitHub"
                        class="order-lg-1"
                     >
-                        <twig:Icon name="github"/>
+                        <twig:ux:icon name="github"/>
                     </a>
                     <a href="{{ url('app_documentation') }}" style="font-size: 11px; text-transform: uppercase;" class="order-lg-0">Docs</a>
                     <a href="{{ url('app_changelog') }}" style="font-size: 11px; text-transform: uppercase;" class="order-lg-0">Changelog</a>
@@ -17,7 +17,7 @@
                        style="font-size: 1.5rem;"
                        aria-label="Symfony website"
                     >
-                        <twig:Icon name="symfony"/>
+                        <twig:ux:icon name="symfony"/>
                     </a>
                 </p>
             </div>

ux.symfony.com/templates/_header.html.twig

@@ -13,7 +13,7 @@
                     data-action="ux-header#toggleMenu"
                     aria-label="Toggle menu"
                 >
-                    <twig:Icon name="menu"/>
+                    <twig:ux:icon name="menu"/>
                 </button>
                 <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
                 <a
@@ -22,15 +22,15 @@
                     rel="external me"
                     title="Symfony UX on X (Twitter)"
                 >
-                    <twig:Icon name="x-twitter"/>
+                    <twig:ux:icon name="x-twitter"/>
                 </a>
                 <a
                     class="AppNav_item AppNav_item--icon d-none d-sm-grid"
                     href="https://github.com/symfony/ux"
                     rel="external me"
                     title="Symfony UX on GitHub"
                 >
-                    <twig:Icon name="github" />
+                    <twig:ux:icon name="github" />
                 </a>
             </div>
 

ux.symfony.com/templates/components/Browser.html.twig

@@ -15,23 +15,23 @@
                 </button>
             </div>
             <div class="Browser__url">
-                <twig:Icon name="lock" />
+                <twig:ux:icon name="lock" />
                 <span>
                     <span hidden>https://</span><em>ux.symfony.com</em><span hidden>{{ url }}</span>
                 </span>
                 <button class="Browser__action">
-                    <twig:Icon name="refresh" />
+                    <twig:ux:icon name="refresh" />
                 </button>
             </div>
             <div class="Browser__actions">
                 {% if false %}
                     <button class="Browser__action" data-bs-toggle="tooltip" title="Feedback">
-                        <twig:Icon name="circle-help" />
+                        <twig:ux:icon name="circle-help" />
                     </button>
                 {% endif %}
                 {% if githubUrl|default %}
                     <a class="Browser__action" data-bs-toggle="tooltip" title="View on Github" href="{{ githubUrl }}">
-                        <twig:Icon name="github" />
+                        <twig:ux:icon name="github" />
                     </a>
                 {% endif %}
             </div>

ux.symfony.com/templates/components/ChangelogItem.html.twig

@@ -14,7 +14,7 @@
         <details {{ isOpen|default ? 'open' }}>
             <summary class="ChangelogItem__Head">
                 <h2 class="ChangelogItem__Title">{{ item.name|default(item.version) }}</h2>
-                <twig:Icon name="arrow-down" class="ChangelogItem__Toggle" />
+                <twig:ux:icon name="arrow-down" class="ChangelogItem__Toggle" />
             </summary>
             <div class="ChangelogItem__Text">
                 {{ this.getContent()|markdown_to_html }}

ux.symfony.com/templates/components/Code/CodeBlock.html.twig

@@ -46,7 +46,7 @@
                 data-code-expander-target="expandCodeButton"
                 data-action="code-expander#expandCode"
             >
-                <twig:Icon name="arrow-down"/>
+                <twig:ux:icon name="arrow-down"/>
                 <span>Expand code</span>
             </button>
         {% endblock %}

ux.symfony.com/templates/components/Code/CodeBlockButtons.html.twig

@@ -11,7 +11,7 @@
         data-bs-placement="bottom"
         title="View on GitHub"
     >
-        <twig:Icon name="github"/>
+        <twig:ux:icon name="github"/>
     </a>
 {% endset %}
 
@@ -32,7 +32,7 @@
             data-action="clipboarder#copy"
             data-clipboarder-target="button"
         >
-            <twig:Icon name="copy"/>
+            <twig:ux:icon name="copy"/>
         </button>
     </div>
 

ux.symfony.com/templates/components/Code/CodeLine.html.twig

@@ -16,6 +16,6 @@
     ><code>{{ _code ? _code|trim|raw : code }}</code></pre>
 
     <button class="btn btn-sm IconModalcopy" data-action="clipboarder#copy" data-clipboarder-target="button">
-        <twig:Icon name="copy" />
+        <twig:ux:icon name="copy" />
     </button>
 </div>

ux.symfony.com/templates/components/DocsLink.html.twig

@@ -5,9 +5,9 @@
                rel="{{ isExternal ? 'external noopened noreferrer' }}"
             >{{ title }}</a>
             {% if icon|default %}
-                <twig:Icon name="{{ icon }}" class="DocsLink_arrow"/>
+                <twig:ux:icon name="{{ icon }}" class="DocsLink_arrow"/>
             {% elseif isExternal %}
-                <twig:Icon name="arrow-right" style="transform: rotate(-45deg);" class="DocsLink_arrow"/>
+                <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);" class="DocsLink_arrow"/>
             {% endif %}
         </p>
         <div class="DocsLink_description">

ux.symfony.com/templates/components/FoodVote.html.twig

@@ -6,7 +6,7 @@
     <td style="width: 250px;">
         {% if hasVoted %}
             <div class="alert alert-success">
-                Thanks for voting! <twig:Icon name="circle-check" />
+                Thanks for voting! <twig:ux:icon name="circle-check" />
             </div>
         {% else %}
             <button
@@ -16,7 +16,7 @@
                 data-live-action-param="vote"
                 data-live-direction-param="up"
             >
-                <twig:Icon name="arrow-up" />
+                <twig:ux:icon name="arrow-up" />
             </button>
             <button
                 type="button"
@@ -25,7 +25,7 @@
                 data-live-action-param="vote"
                 data-live-direction-param="down"
             >
-                <twig:Icon name="arrow-down" />
+                <twig:ux:icon name="arrow-down" />
             </button>
         {% endif %}
     </td>

ux.symfony.com/templates/components/Icon.html.twig

@@ -21,7 +21,7 @@
                     <span>{{ icon.prefix }}</span><span>:</span><span>{{ icon.name }}</span>
                 </p>
                 <button type="button" class="btn close" data-action="icon-modal#close">
-                    <twig:Icon name="cross"/>
+                    <twig:ux:icon name="cross"/>
                 </button>
             </div>
 

ux.symfony.com/templates/components/Icon/IconModal.html.twig

@@ -7,7 +7,7 @@
 
                 <div class="input-group" style="max-width: 200px;">
                     <label class="input-group-text" for="IconSearch-Set">
-                        <twig:Icon name="icon-sets"/>
+                        <twig:ux:icon name="icon-sets"/>
                     </label>
                     <select class="form-control" data-model="set" id="IconSearch-Set">
                         <option value="">All sets</option>
@@ -23,7 +23,7 @@
 
                 <div class="input-group IconSearch__Query">
                     <label class="input-group-text" for="IconSearch-Query">
-                        <twig:Icon name="icon-search"/>
+                        <twig:ux:icon name="icon-search"/>
                     </label>
                     <input
                         autofocus
@@ -41,18 +41,18 @@
                 <div class="d-flex flex-shrink-0 IconSearch__Display">
                     <div class="btn-group" role="group" data-controller="icon-size">
                         <button class="btn" data-action="icon-size#small">
-                            <twig:Icon name="grid-small"/>
+                            <twig:ux:icon name="grid-small"/>
                         </button>
                         <button class="btn" data-action="icon-size#large">
-                            <twig:Icon name="grid-large"/>
+                            <twig:ux:icon name="grid-large"/>
                         </button>
                     </div>
                 </div>
 
                 {% if false %}
                     <div data-live-ignore="true">
                         <button class="btn IconBag__Button" data-controller="icon-bag">
-                            <twig:Icon name="icon-folder"/>
+                            <twig:ux:icon name="icon-folder"/>
                             <span class="IconBag__Badge" data-icon-bag-target="count"></span>
                         </button>
                     </div>

ux.symfony.com/templates/components/Icon/IconSearch.html.twig

@@ -41,7 +41,7 @@
                 class="btn btn-link"
                 title="Click to edit!"
             >
-                <twig:Icon name="pencil" />
+                <twig:ux:icon name="pencil" />
             </button>
         {% endif %}
     </div>

ux.symfony.com/templates/components/InlineEditFood.html.twig

@@ -59,7 +59,7 @@
                     data-live-action-param="addLineItem"
                     class="btn btn-sm btn-secondary"
                     type="button"
-                ><twig:Icon name="plus" /> Add Item</button>
+                ><twig:ux:icon name="plus" /> Add Item</button>
             </div>
         </div>
 
@@ -101,13 +101,13 @@
             {{ areAnyLineItemsEditing ? 'disabled' : '' }}
         >
             <span data-loading="action(saveInvoice)|show">
-                <twig:Icon name="spinner" style="animation: spin 1s linear infinite;" />
+                <twig:ux:icon name="spinner" style="animation: spin 1s linear infinite;" />
             </span>
             {% if savedSuccessfully %}
-                <twig:Icon name="circle-check" class="text-success" />
+                <twig:ux:icon name="circle-check" class="text-success" />
             {% endif %}
             {% if saveFailed %}
-                <twig:Icon name="circle-exclamation" />
+                <twig:ux:icon name="circle-exclamation" />
             {% endif %}
             Save Invoice
         </button>

ux.symfony.com/templates/components/InvoiceCreator.html.twig

@@ -73,6 +73,6 @@
             data-live-key-param="{{ key }}"
             class="btn btn-link text-danger btn-sm ml-2"
             type="button"
-        ><twig:Icon name="cross" /></button>
+        ><twig:ux:icon name="cross" /></button>
     </td>
 </tr>

ux.symfony.com/templates/components/InvoiceCreatorLineItem.html.twig

@@ -9,7 +9,7 @@
         <{{ titleTag }} class="PackageBox_title">
             <a href="{{ path(package.route) }}" class="PackageBox_link">{{ package.humanName }}</a>
             <span class="PackageBox_arrow">
-                <twig:Icon name="arrow-right" />
+                <twig:ux:icon name="arrow-right" />
             </span>
         </{{ titleTag }}>
         <div class="PackageBox_description">

ux.symfony.com/templates/components/Package/PackageBox.html.twig

@@ -12,6 +12,6 @@
         aria-label="Copy command"
         data-action="clipboarder#copy"
     >
-        <twig:Icon name="copy"/>
+        <twig:ux:icon name="copy"/>
     </button>
 </div>

ux.symfony.com/templates/components/TerminalCommand.html.twig

@@ -5,6 +5,6 @@
     data-controller="theme-switcher"
     data-action="theme-switcher#switch"
 >
-    <twig:Icon name="theme-light" />
-    <twig:Icon name="theme-dark" />
+    <twig:ux:icon name="theme-light" class="Icon--theme-light" />
+    <twig:ux:icon name="theme-dark" class="Icon--theme-dark" />
 </button>

ux.symfony.com/templates/components/ThemeSwitcher.html.twig

@@ -7,9 +7,9 @@
     data-action="theme-switcher#switch"
 >
     <span class="LiveMemory-ThemeSwitch-Mode LiveMemory-ThemeSwitch-Dark" data-theme="dark">
-        <twig:Icon name="theme-dark"  />
+        <twig:ux:icon name="theme-dark"  />
     </span>
     <span class="LiveMemory-ThemeSwitch-Mode LiveMemory-ThemeSwitch-Light" data-theme="light">
-        <twig:Icon name="theme-light" />
+        <twig:ux:icon name="theme-light" />
     </span>
 </button>

ux.symfony.com/templates/demos/live_memory/components/LiveMemory/ThemeSwitch.html.twig

@@ -16,7 +16,7 @@
         <header class="Header">
             <nav class="HeaderMenu">
                 <a href="{{ url('app_demos') }}" class="HeaderButton" aria-label="Back to the demos">
-                    <twig:Icon name="arrow-left" />
+                    <twig:ux:icon name="arrow-left" />
                     <span aria-hidden="true" hidden>Back to the demos</span>
                 </a>
             </nav>

ux.symfony.com/templates/demos/live_memory/index.html.twig

@@ -8,7 +8,7 @@
     {% if file_info.isDirectory %}
         <li class="FileTree-main FileTree-dir">
             <span {{- _self.summaryAttributes(file_info.description) -}}>
-                <twig:Icon name="folder-open" class="d-inline-block m-0 mr-2"/>
+                <twig:ux:icon name="folder-open" class="d-inline-block m-0 mr-2"/>
                 {{ file_info.filename }}
             </span>
 
@@ -21,7 +21,7 @@
     {% else %}
         <li class="FileTree-main FileTree-file">
             <span {{- _self.summaryAttributes(file_info.description) -}}>
-                <twig:Icon name="file" class="d-inline-block m-0 mr-2" />
+                <twig:ux:icon name="file" class="d-inline-block m-0 mr-2" />
                 {{ file_info.filename }}
             </span>
         </li>