Allow injecting SVG classes directly into ClickableCard to allow them picking up on currentColor

Author: markrandall

public/index.php

@@ -5,6 +5,7 @@
 use phpweb\Releases\VersionLogos;
 use phpweb\Themes\ClickableCard;
 use phpweb\Themes\HTML;
+use phpweb\Themes\SVG;
 use phpweb\Themes\ThemeRenderer;
 
 require_once __DIR__ . '/../include/prepend.inc';
@@ -38,7 +39,18 @@ private static function getLanguageDevelopmentCards(): array
             new ClickableCard(
                 title: 'PHP on Github',
                 href: 'https://github.com/php',
-                image: '/images/language-development/github_invertocat_white.svg',
+                image: new SVG(<<<SVG
+                    <svg style="" class="" width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <g clip-path="url(#clip0_730_27136)">
+                        <path d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z" fill="currentColor"/>
+                        </g>
+                        <defs>
+                        <clipPath id="clip0_730_27136">
+                        <rect width="98" height="96" fill="white"/>
+                        </clipPath>
+                        </defs>
+                    </svg>
+                SVG),
                 body: 'Browse and contribute to the source code behind the PHP engine and infrastructure.',
             ),
             new ClickableCard(

src/Themes/ClickableCard.php

@@ -8,7 +8,7 @@ public function __construct(
         public string|HTML $title,
         public string $href,
         public string $href_label = '',
-        public string $image = '',
+        public string|SVG $image = '',
         public string|HTML $body = '',
     ) {
     }

src/Themes/SVG.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace phpweb\Themes;
+
+readonly class SVG
+{
+    public function __construct(private string $content)
+    {
+    }
+
+    public function format(?string $style = null, ?string $cssClass = null): string
+    {
+        $replacements = [];
+
+        if ($style !== null) {
+            $replacements['style=""'] = 'style="' . $style . '"';
+        }
+
+        if ($cssClass !== null) {
+            $replacements['class=""'] = 'class="' . $cssClass . '"';
+        }
+
+        return str_replace(array_keys($replacements), array_values($replacements), $this->content);
+    }
+}

src/Themes/ThemeRenderer.php

@@ -26,7 +26,9 @@ public function clickableCards(
                             <svg class="gst-navcard-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM368 360C368 373.3 378.7 384 392 384C405.3 384 416 373.3 416 360L416 248C416 234.7 405.3 224 392 224L280 224C266.7 224 256 234.7 256 248C256 261.3 266.7 272 280 272L334.1 272L231.1 375C221.7 384.4 221.7 399.6 231.1 408.9C240.5 418.2 255.7 418.3 265 408.9L368 305.9L368 360z"/></svg>
                         </div>
                         <div class="gst-card-title">
-                            <?php if ($card->image) { ?>
+                            <?php if ($card->image instanceof SVG) { ?>
+                                <?= $card->image->format(cssClass: $cssImage) ?>
+                            <?php } elseif ($card->image) { ?>
                                 <img src="<?= $this->safe($card->image) ?>"
                                      class="<?= $cssImage ?>"
                                      aria-hidden="true" alt=""/>