[Site] Use ux-icons (1/2)

ux.symfony.com/assets/styles/components/_DocsLink.scss

@@ -43,6 +43,7 @@
   color: gray;
   font-size: 1.5rem;
   opacity: .5;
+  margin-inline-start: auto;
   transition: opacity 600ms ease-in-out;
   .DocsLink:hover & {
     transition: opacity 250ms ease-in-out;

ux.symfony.com/src/LiveMemory/Component/Icon.php

@@ -11,9 +11,11 @@
 
 namespace App\LiveMemory\Component;
 
-use App\Twig\Icon as BaseIcon;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+use function Symfony\Component\String\u;
 
 /**
  * @demo LiveMemory
@@ -24,11 +26,52 @@
     name: 'LiveMemory:Icon',
     template: 'demos/live_memory/components/LiveMemory/Icon.html.twig',
 )]
-class Icon extends BaseIcon
+class Icon
 {
+    /**
+     * Name of the icon file without extension (ex: `symfony-ux`).
+     */
+    public string $name;
+
+    /**
+     * Accessibility label of the icon. Defaults to `name|title Icon` (ex: `Symfony Ux Icon`).
+     */
+    public ?string $label = null;
+
+    protected string $iconDirectory;
+
     public function __construct(
         #[Autowire('%kernel.project_dir%')] string $projectDir,
     ) {
         $this->iconDirectory = $projectDir.'/assets/images/demos/live-memory/icons/';
     }
+
+    public function mount(string $name): void
+    {
+        if (!preg_match('/[A-Za-z0-9-]+/', $name)) {
+            throw new \InvalidArgumentException(\sprintf('Icon name can only contain letters, digits or dashes, "%s" provided.', $this->name));
+        }
+
+        $this->name = $name;
+    }
+
+    #[ExposeInTemplate]
+    public function getLabel(): string
+    {
+        return $this->label ??= u($this->name)->title(true)->append(' Icon')->toString();
+    }
+
+    #[ExposeInTemplate]
+    public function getRawSvg(): string
+    {
+        $path = $this->iconDirectory.'/'.$this->name.'.svg';
+        if (!file_exists($path)) {
+            throw new \InvalidArgumentException(\sprintf('File "%s" does not exist.', $path));
+        }
+        $svg = file_get_contents($path);
+
+        $svg = u($svg)->collapseWhitespace();
+
+        return $svg->toString();
+    }
 }

ux.symfony.com/src/Twig/Icon.php

@@ -1,84 +0,0 @@
-<?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\Twig;
-
-use Symfony\Component\DependencyInjection\Attribute\Autowire;
-use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
-use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
-
-use function Symfony\Component\String\u;
-
-#[AsTwigComponent]
-class Icon
-{
-    /**
-     * Name of the icon file without extension (ex: `symfony-ux`).
-     */
-    public string $name;
-
-    /**
-     * Accessibility label of the icon. Defaults to `name|title Icon` (ex: `Symfony Ux Icon`).
-     */
-    public ?string $label = null;
-
-    /**
-     * Remove XMLNS attribute on SVG tag (default).
-     *
-     * This attribute is required when the file is used as a distant asset (ex: an image src)
-     * but is unnecessary when used directly in HTML code
-     *
-     * @see https://www.w3.org/TR/SVG/struct.html#Namespace
-     */
-    public bool $stripXmlns = true;
-
-    protected string $iconDirectory;
-
-    public function __construct(
-        #[Autowire('%kernel.project_dir%')] string $projectDir,
-    ) {
-        $this->iconDirectory = $projectDir.'/assets/images/icons';
-    }
-
-    public function mount(string $name): void
-    {
-        if (!preg_match('/[A-Za-z0-9-]+/', $name)) {
-            throw new \InvalidArgumentException(\sprintf('Icon name can only contain letters, digits or dashes, "%s" provided.', $this->name));
-        }
-
-        $this->name = $name;
-    }
-
-    #[ExposeInTemplate]
-    public function getRawSvg(): string
-    {
-        $path = $this->iconDirectory.'/'.$this->name.'.svg';
-        if (!file_exists($path)) {
-            throw new \InvalidArgumentException(\sprintf('File "%s" does not exist.', $path));
-        }
-        $svg = file_get_contents($path);
-
-        $svg = u($svg)->collapseWhitespace();
-
-        if ($this->stripXmlns) {
-            $svg = $svg->replace('xmlns="http://www.w3.org/2000/svg"', '')
-                ->replace('xmlns:xlink="http://www.w3.org/1999/xlink"', '');
-        }
-
-        return $svg->toString();
-    }
-
-    #[ExposeInTemplate]
-    public function getLabel(): string
-    {
-        return $this->label ??= u($this->name)->title(true)->append(' Icon')->toString();
-    }
-}

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

@@ -2,8 +2,6 @@
     class: 'Icon Icon--' ~ name,
     role: 'img',
     'aria-hidden': 'true',
-    'aria-label': label,
+    'aria-label': label ?? name|humanize,
 } %}
-<i {{ attributes.defaults(default_attributes) }}>
-    {{- rawSvg|raw -}}
-</i>
+<twig:ux:icon name="{{ name }}" {{ ...attributes.defaults(default_attributes) }} />

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

@@ -1 +1 @@
-{{ rawSvg|raw }}
+{{ this.getRawSvg()|raw }}