bug #2959 [ux-icons] Fix value of xmlns attribute for imported svg icons (roverwolf)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[ux-icons] Fix value of xmlns attribute for imported svg icons

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Docs?         | no
| Issues        | Fix #2958
| License       | MIT

Change the xmlns attribute to be `http://www.w3.org/2000/svg` for icons imported using `console ux:icons:import` so that the icons will correctly render in browsers and can be viewed by other image tools.

Commits
-------

bdf6270 [ux-icons] Fix value of xmlns attribute for imported svg icons

Author: Kocal

src/Icons/src/Iconify.php

@@ -27,7 +27,7 @@
 final class Iconify
 {
     public const API_ENDPOINT = 'https://api.iconify.design';
-    private const ATTR_XMLNS_URL = 'https://www.w3.org/2000/svg';
+    private const ATTR_XMLNS_URL = 'http://www.w3.org/2000/svg';
 
     // URL must be 500 chars max (iconify limit)
     // -39 chars: https://api.iconify.design/XXX.json?icons=

src/Icons/tests/Integration/RenderIconsInTwigTest.php

@@ -33,8 +33,8 @@ public function testRenderIcons()
                 <li id="fifth"><svg viewBox="0 0 24 24" fill="currentColor" class="h-8 w-8" aria-hidden="true"><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" class="w-6 h-6" aria-labelledby="foo"><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="seventh"><svg viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6" aria-hidden="true"><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="eighth"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none"><path fill="currentColor" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z" opacity=".16"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5l-4.33 2.5M12 12l4.33 2.5"/></g></svg></li>
-                <li id="ninth"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24" aria-hidden="true"><g fill="none"><path fill="currentColor" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z" opacity=".16"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5l-4.33 2.5M12 12l4.33 2.5"/></g></svg></li>
+                <li id="eighth"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none"><path fill="currentColor" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z" opacity=".16"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5l-4.33 2.5M12 12l4.33 2.5"/></g></svg></li>
+                <li id="ninth"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24" aria-hidden="true"><g fill="none"><path fill="currentColor" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z" opacity=".16"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5l-4.33 2.5M12 12l4.33 2.5"/></g></svg></li>
             </ul>
             HTML,
             trim($output)
@@ -49,7 +49,7 @@ public function testRenderAliasIcons()
         $templateAlias = '<twig:ux:icon name="flowbite:x-outline" />';
         $outputAlias = self::getContainer()->get(Environment::class)->createTemplate($templateAlias)->render();
 
-        $expected = '<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"/></svg>';
+        $expected = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L17.94 6M18 18L6.06 6"/></svg>';
         $this->assertSame($outputIcon, $expected);
         $this->assertSame($outputIcon, $outputAlias);
     }

src/Icons/tests/Unit/IconifyTest.php

@@ -47,7 +47,7 @@ public function testFetchIcon()
         $icon = $iconify->fetchIcon('bi', 'heart');
 
         $this->assertEquals($icon->getInnerSvg(), '<path d="M0 0h24v24H0z" fill="none"/>');
-        $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'https://www.w3.org/2000/svg']);
+        $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'http://www.w3.org/2000/svg']);
     }
 
     public function testFetchIconByAlias()
@@ -78,7 +78,7 @@ public function testFetchIconByAlias()
         $icon = $iconify->fetchIcon('bi', 'foo');
 
         $this->assertEquals($icon->getInnerSvg(), '<path d="M0 0h24v24H0z" fill="none"/>');
-        $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'https://www.w3.org/2000/svg']);
+        $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'http://www.w3.org/2000/svg']);
     }
 
     public function testFetchIconThrowsWhenIconSetDoesNotExists()

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 1__1.html

@@ -13,7 +13,7 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div class="relative w-full rounded-lg border p-4 [&amp;&gt;svg~*]:pl-7 [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:left-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg]:text-foreground bg-background text-foreground max-w-lg" role="alert">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
     <h5 class="mb-1 font-medium leading-none tracking-tight ">Heads up!</h5>
     <p class="text-sm [&amp;_p]:leading-relaxed ">You can add components to your app using the cli.
     </p>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 2__1.html

@@ -13,7 +13,7 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div class="relative w-full rounded-lg border p-4 [&amp;&gt;svg~*]:pl-7 [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:left-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg]:text-foreground bg-background text-foreground max-w-lg" role="alert">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
     <h5 class="mb-1 font-medium leading-none tracking-tight ">Heads up!</h5>
     <p class="text-sm [&amp;_p]:leading-relaxed ">You can add components to your app using the cli.
     </p>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Alert, code 3__1.html

@@ -13,7 +13,7 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div class="relative w-full rounded-lg border p-4 [&amp;&gt;svg~*]:pl-7 [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:left-4 [&amp;&gt;svg]:top-4 border-destructive/50 text-destructive dark:border-destructive [&amp;&gt;svg]:text-destructive max-w-lg" role="alert">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-4v4m0 4h.01"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-4v4m0 4h.01"></path></svg>
     <h5 class="mb-1 font-medium leading-none tracking-tight ">Error</h5>
     <p class="text-sm [&amp;_p]:leading-relaxed ">Your session has expired. Please log in again.
     </p>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Badge, code 6__1.html

@@ -10,6 +10,6 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="mr-1 h-3 w-3" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="mr-1 h-3 w-3" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
     Verified
 </div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 1__1.html

@@ -28,17 +28,17 @@
 <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Home</a>
         </li>
-        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
 
         <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Docs</a>
         </li>
-        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
 
         <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Components</a>
         </li>
-        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
 
         <li class="inline-flex items-center gap-1.5 ">
 <span class="font-normal text-foreground " role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 2__1.html

@@ -28,17 +28,17 @@
 <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Home</a>
         </li>
-        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
 
         <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Docs</a>
         </li>
-        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
 
         <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Components</a>
         </li>
-        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
+        <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path></svg></li>
 
         <li class="inline-flex items-center gap-1.5 ">
 <span class="font-normal text-foreground " role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component Breadcrumb, code 3__1.html

@@ -35,19 +35,19 @@
 <a class="transition-colors hover:text-foreground " href=".">Home</a>
         </li>
         <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 2L2 22"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 2L2 22"></path></svg>
         </li>
         <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Docs</a>
         </li>
         <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 2L2 22"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 2L2 22"></path></svg>
         </li>
         <li class="inline-flex items-center gap-1.5 ">
 <a class="transition-colors hover:text-foreground " href=".">Components</a>
         </li>
         <li class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5 " role="presentation" aria-hidden="true">
-<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 2L2 22"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 2L2 22"></path></svg>
         </li>
         <li class="inline-flex items-center gap-1.5 ">
 <span class="font-normal text-foreground " role="link" aria-disabled="true" aria-current="page">Breadcrumb</span>