fix(view): switch to runtime icon view component (#1165)

Author: brendt

src/Tempest/View/src/Components/Icon.php

@@ -11,12 +11,11 @@
 use Tempest\Core\AppConfig;
 use Tempest\Http\Status;
 use Tempest\HttpClient\HttpClient;
+use Tempest\Support\Html\HtmlString;
 use Tempest\Support\Str\ImmutableString;
-use Tempest\View\Elements\ViewComponentElement;
 use Tempest\View\IconConfig;
-use Tempest\View\ViewComponent;
 
-final readonly class Icon implements ViewComponent
+final readonly class Icon
 {
     public function __construct(
         private AppConfig $appConfig,
@@ -25,28 +24,21 @@ public function __construct(
         private HttpClient $http,
     ) {}
 
-    public static function getName(): string
+    public function render(string $name, ?string $class = null): HtmlString
     {
-        return 'x-icon';
-    }
-
-    public function compile(ViewComponentElement $element): string
-    {
-        $name = $element->getAttribute('name');
-        $class = $element->getAttribute('class');
+        $html = $this->svg($name);
 
-        $svg = $this->render($name);
-
-        if (! $svg) {
-            return $this->appConfig->environment->isLocal()
+        if (! $html) {
+            return new HtmlString($this->appConfig->environment->isLocal()
                 ? ('<!-- unknown-icon: ' . $name . ' -->')
-                : '';
+                : '');
+        }
+
+        if ($class) {
+            $html = $this->injectClass($html, $class);
         }
 
-        return match ($class) {
-            null => $svg,
-            default => $this->injectClass($svg, $class),
-        };
+        return new HtmlString($html);
     }
 
     /**
@@ -79,7 +71,7 @@ private function download(string $prefix, string $name): ?string
      * in the cache, it will download it on the fly and cache it for future
      * use. If the icon is already in the cache, it will be served from there.
      */
-    private function render(string $name): ?string
+    private function svg(string $name): ?string
     {
         try {
             $parts = explode(':', $name, 2);
@@ -110,8 +102,8 @@ private function injectClass(string $svg, string $class): string
     {
         return new ImmutableString($svg)
             ->replace(
-                search: '<svg ',
-                replace: "<svg class=\"{$class}\" ",
+                search: '<svg',
+                replace: "<svg class=\"{$class}\"",
             )
             ->toString();
     }

src/Tempest/View/src/Components/x-icon.view.php

@@ -0,0 +1,9 @@
+<?php
+
+use Tempest\View\Components\Icon;
+
+use function Tempest\get;
+
+?>
+
+{{ get(Icon::class)->render($name, $class ?? null) }}

tests/Integration/View/IconComponentTest.php

@@ -161,4 +161,26 @@ public function test_it_forwards_the_class_attribute(): void
             ),
         );
     }
+
+    public function test_with_dynamic_data(): void
+    {
+        $mockHttpClient = $this->createMock(HttpClient::class);
+        $mockHttpClient
+            ->expects($this->exactly(1))
+            ->method('get')
+            ->with('https://api.iconify.design/ph/eye.svg')
+            ->willReturn(new GenericResponse(status: Status::OK, body: '<svg></svg>'));
+
+        $this->container->register(HttpClient::class, fn () => $mockHttpClient);
+
+        $rendered = $this->render(
+            '<x-icon :name="$iconName" class="size-5" />',
+            iconName: 'ph:eye',
+        );
+
+        $this->assertSame(
+            '<svg class="size-5"></svg>',
+            $rendered,
+        );
+    }
 }