Fix for invalid defer attribute on SVG tag (#218)

* Fix for invalid attribute * wip --------- Co-authored-by: Dries Vints <[email protected]>
blade-ui-kit · Oct 18, 2023 · b5e6603 · b5e6603
1 parent 1520ec7
commit b5e6603
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -422,8 +422,7 @@ This will push the icons to the stack "bladeicons", you should load this stack a
 
 ##### Using deferred icons in JavaScript 
 
-You can re-use your icons from blade in your JavaScript rendered views by providing a custom defer value that will be used
-as an identifier:
+You can re-use your icons from blade in your JavaScript rendered views by providing a custom defer value that will be used as an identifier:
 
 ```blade
 <x-icon-camera defer="my-custom-hash" />

diff --git a/src/Svg.php b/src/Svg.php
@@ -19,6 +19,9 @@ public function __construct(string $name, string $contents, array $attributes =
     {
         $this->name = $name;
         $this->contents = $this->deferContent($contents, $attributes['defer'] ?? false);
+
+        unset($attributes['defer']);
+
         $this->attributes = $attributes;
     }
 

diff --git a/tests/SvgTest.php b/tests/SvgTest.php
@@ -32,7 +32,7 @@ public function it_can_compile_to_defered_html()
         $svg = new Svg('heroicon-o-arrow-right', '<svg>'.$svgPath.'</svg>', ['defer' => true]);
 
         $svgHtml = $svg->toHtml();
-        $this->assertEquals('<svg defer="1"><use href="#icon-8970cc32a6db8f9088d764a8832c411b"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-8970cc32a6db8f9088d764a8832c411b"></use></svg>
     @once("icon-8970cc32a6db8f9088d764a8832c411b")
         @push("bladeicons")
             <g id="icon-8970cc32a6db8f9088d764a8832c411b">
@@ -49,7 +49,7 @@ public function it_can_compile_to_defered_html_custom_defer()
         $svg = new Svg('heroicon-o-arrow-right', '<svg>'.$svgPath.'</svg>', ['defer' => 'my-custom-hash']);
 
         $svgHtml = $svg->toHtml();
-        $this->assertEquals('<svg defer="my-custom-hash"><use href="#icon-my-custom-hash"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-my-custom-hash"></use></svg>
     @once("icon-my-custom-hash")
         @push("bladeicons")
             <g id="icon-my-custom-hash">
@@ -67,7 +67,7 @@ public function it_can_compile_to_defered_html_with_group()
 
         $svgHtml = $svg->toHtml();
 
-        $this->assertEquals('<svg defer="1"><use href="#icon-17c27df6b7d6560d9202829b719225b0"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-17c27df6b7d6560d9202829b719225b0"></use></svg>
     @once("icon-17c27df6b7d6560d9202829b719225b0")
         @push("bladeicons")
             <g id="icon-17c27df6b7d6560d9202829b719225b0">
@@ -85,7 +85,7 @@ public function it_can_compile_to_defered_html_with_group_custom_defer()
 
         $svgHtml = $svg->toHtml();
 
-        $this->assertEquals('<svg defer="my-custom-hash"><use href="#icon-my-custom-hash"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-my-custom-hash"></use></svg>
     @once("icon-my-custom-hash")
         @push("bladeicons")
             <g id="icon-my-custom-hash">
@@ -105,7 +105,7 @@ public function it_can_compile_to_defered_html_with_group_and_whitespace()
 
         $svgHtml = $svg->toHtml();
 
-        $this->assertEquals('<svg defer="1"><use href="#icon-7f6f192a3c61bd15e25530394ec18d86"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-7f6f192a3c61bd15e25530394ec18d86"></use></svg>
     @once("icon-7f6f192a3c61bd15e25530394ec18d86")
         @push("bladeicons")
             <g id="icon-7f6f192a3c61bd15e25530394ec18d86">
@@ -127,7 +127,7 @@ public function it_can_compile_to_defered_html_with_mask_tag()
 
         $svgHtml = $svg->toHtml();
 
-        $this->assertEquals('<svg defer="1"><use href="#icon-75e079eb3e6f7403d66f76ff7f0475c5"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-75e079eb3e6f7403d66f76ff7f0475c5"></use></svg>
     @once("icon-75e079eb3e6f7403d66f76ff7f0475c5")
         @push("bladeicons")
             <g id="icon-75e079eb3e6f7403d66f76ff7f0475c5">
@@ -151,7 +151,7 @@ public function it_can_compile_to_defered_html_with_defs_tag()
 
         $svgHtml = $svg->toHtml();
 
-        $this->assertEquals('<svg defer="1"><use href="#icon-cf7005271ce6acebfa1a20cb123ad8b0"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-cf7005271ce6acebfa1a20cb123ad8b0"></use></svg>
     @once("icon-cf7005271ce6acebfa1a20cb123ad8b0")
         @push("bladeicons")
             <g id="icon-cf7005271ce6acebfa1a20cb123ad8b0">
@@ -172,7 +172,7 @@ public function it_can_compile_to_defered_html_with_use_tag()
 
         $svgHtml = $svg->toHtml();
 
-        $this->assertEquals('<svg defer="1"><use href="#icon-540a77d3751047fd94004bffda3ffb55"></use></svg>
+        $this->assertEquals('<svg><use href="#icon-540a77d3751047fd94004bffda3ffb55"></use></svg>
     @once("icon-540a77d3751047fd94004bffda3ffb55")
         @push("bladeicons")
             <g id="icon-540a77d3751047fd94004bffda3ffb55">