Improve UXComponent performance

Author: smnandre

src/Icons/config/services.php

@@ -16,6 +16,7 @@
 use Symfony\UX\Icons\Registry\CacheIconRegistry;
 use Symfony\UX\Icons\Registry\LocalSvgIconRegistry;
 use Symfony\UX\Icons\Twig\UXIconComponent;
+use Symfony\UX\Icons\Twig\UXIconComponentListener;
 use Symfony\UX\Icons\Twig\UXIconExtension;
 
 return static function (ContainerConfigurator $container): void {
@@ -49,6 +50,15 @@
             ])
             ->tag('twig.runtime')
 
+        ->set('.ux_icons.twig_component_listener', UXIconComponentListener::class)
+            ->args([
+                service('.ux_icons.icon_renderer'),
+            ])
+            ->tag('kernel.event_listener', [
+                'event' => 'Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent',
+                'method' => 'onPreCreateForRender',
+            ])
+
         ->set('.ux_icons.twig_component.icon', UXIconComponent::class)
     ;
 };

src/Icons/src/DependencyInjection/UXIconsExtension.php

@@ -71,6 +71,10 @@ protected function loadInternal(array $mergedConfig, ContainerBuilder $container
             ->setArgument(1, $mergedConfig['default_icon_attributes'])
         ;
 
+        $container->getDefinition('.ux_icons.twig_component_listener')
+            ->setArgument(1, $mergedConfig['twig_component_name'])
+        ;
+
         $container->getDefinition('.ux_icons.twig_component.icon')
             ->addTag('twig.component', [
                 'key' => $mergedConfig['twig_component_name'],

src/Icons/src/Twig/UXIconComponentListener.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Symfony\UX\Icons\Twig;
+
+use Symfony\UX\Icons\IconRenderer;
+use Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent;
+
+/**
+ * @author Simon André <[email protected]>
+ *
+ * @internal
+ */
+final class UXIconComponentListener
+{
+    public function __construct(
+        private IconRenderer $iconRenderer,
+        private string $componentName,
+    ) {
+    }
+
+    public function onPreCreateForRender(PreCreateForRenderEvent $event): void
+    {
+        if ($this->componentName !== $event->getName()) {
+            return;
+        }
+
+        $attributes = $event->getInputProps();
+        $name = (string) $attributes['name'];
+        unset($attributes['name']);
+
+        $svg = $this->iconRenderer->renderIcon($name, $attributes);
+        $event->setRenderedString($svg);
+        $event->stopPropagation();
+    }
+}

src/Icons/tests/Integration/Twig/UXIconExtensionTest.php

@@ -39,13 +39,11 @@ public function testRenderIcons(): void
                 <li id="second"><svg viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd"></path></svg></li>
                 <li id="third"><svg viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg></li>
                 <li id="forth"><svg viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg></li>
-                <li id="fifth"><svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd"></path></svg>
-            </li>
-                <li id="sixth"><svg viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg>
-            </li>
+                <li id="fifth"><svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd"></path></svg></li>
+                <li id="sixth"><svg viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg></li>
             </ul>
             HTML,
-            $output
+            preg_replace("#(\s+)</li>#m", "</li>", $output)
         );
     }
 }