Add ability to provide own defer hash

- Ideal when you want to reuse deferred icons in your React/Vue components - Related PR discussion blade-ui-kit#200
pionl · Sep 22, 2022 · 90f220f · 90f220f
1 parent 26278e4
commit 90f220f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/Svg.php b/src/Svg.php
@@ -41,14 +41,17 @@ public function toHtml(): string
         );
     }
 
-    protected function deferContent($contents, $defer = false)
+    /**
+     * @param string|bool $defer
+     */
+    protected function deferContent(string $contents, $defer = false): string
     {
-        if (! $defer) {
+        if ($defer === false) {
             return $contents;
         }
 
         $svgContent = strip_tags($contents, ['circle', 'ellipse', 'line', 'path', 'polygon', 'polyline', 'rect', 'g']);
-        $hash = 'icon-'.md5($svgContent);
+        $hash = 'icon-'.(is_string($defer) ? $defer : md5($svgContent));
         $contents = str_replace($svgContent, strtr('<use href=":href"></use>', [':href' => '#'.$hash]), $contents);
         $contents .= <<<BLADE
 

diff --git a/tests/SvgTest.php b/tests/SvgTest.php
@@ -42,6 +42,23 @@ public function it_can_compile_to_defered_html()
     @endonce', $svgHtml);
     }
 
+    /** @test */
+    public function it_can_compile_to_defered_html_custom_defer()
+    {
+        $svgPath = '<path d="M14 5l7 7m0 0l-7 7m7-7H3"></path>';
+        $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>
+    @once("icon-my-custom-hash")
+        @push("bladeicons")
+            <g id="icon-my-custom-hash">
+                <path d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+            </g>
+        @endpush
+    @endonce', $svgHtml);
+    }
+
     /** @test */
     public function it_can_compile_to_defered_html_with_group()
     {
@@ -60,6 +77,24 @@ public function it_can_compile_to_defered_html_with_group()
     @endonce', $svgHtml);
     }
 
+    /** @test */
+    public function it_can_compile_to_defered_html_with_group_custom_defer()
+    {
+        $svgPath = '<g id="test" transform="translate(1 1)"><path d="M14 5l7 7m0 0l-7 7m7-7H3"></path></g>';
+        $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>
+    @once("icon-my-custom-hash")
+        @push("bladeicons")
+            <g id="icon-my-custom-hash">
+                <g id="test" transform="translate(1 1)"><path d="M14 5l7 7m0 0l-7 7m7-7H3"></path></g>
+            </g>
+        @endpush
+    @endonce', $svgHtml);
+    }
+
     /** @test */
     public function it_can_compile_to_defered_html_with_group_and_whitespace()
     {