Fix value of xmlns attribute for imported svg icons

roverwolf · roverwolf · commit 476872f60b00 · 2025-07-29T10:14:17.000-07:00
Change the xmlns attribute to be `http://www.w3.org/2000/svg` so that the icons will correctly render in browsers and can be viewed by other image tools.
diff --git a/src/Icons/src/Iconify.php b/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=
diff --git a/src/Icons/tests/Integration/RenderIconsInTwigTest.php b/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);
     }
diff --git a/src/Icons/tests/Unit/IconifyTest.php b/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()

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`final class Iconify`
`28`	`28`	`{`
`29`	`29`	`public const API_ENDPOINT = 'https://api.iconify.design';`
`30`		`- private const ATTR_XMLNS_URL = 'https://www.w3.org/2000/svg';`
	`30`	`+ private const ATTR_XMLNS_URL = 'http://www.w3.org/2000/svg';`
`31`	`31`
`32`	`32`	`// URL must be 500 chars max (iconify limit)`
`33`	`33`	`// -39 chars: https://api.iconify.design/XXX.json?icons=`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ public function testFetchIcon()`
`47`	`47`	`$icon = $iconify->fetchIcon('bi', 'heart');`
`48`	`48`
`49`	`49`	`$this->assertEquals($icon->getInnerSvg(), '<path d="M0 0h24v24H0z" fill="none"/>');`
`50`		`- $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'https://www.w3.org/2000/svg']);`
	`50`	`+ $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'http://www.w3.org/2000/svg']);`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`public function testFetchIconByAlias()`
`@@ -78,7 +78,7 @@ public function testFetchIconByAlias()`
`78`	`78`	`$icon = $iconify->fetchIcon('bi', 'foo');`
`79`	`79`
`80`	`80`	`$this->assertEquals($icon->getInnerSvg(), '<path d="M0 0h24v24H0z" fill="none"/>');`
`81`		`- $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'https://www.w3.org/2000/svg']);`
	`81`	`+ $this->assertEquals($icon->getAttributes(), ['viewBox' => '0 0 24 24', 'xmlns' => 'http://www.w3.org/2000/svg']);`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`public function testFetchIconThrowsWhenIconSetDoesNotExists()`