best practices and inline-svgs: detection and display of the entire i…

…con set in the HTML report in the case of <svg> with more <symbol> or <g>
janreges · Dec 14, 2023 · 3b2772c · 3b2772c
1 parent bbc47e6
commit 3b2772c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 1 deletion.
diff --git a/src/Crawler/Export/HtmlReport.php b/src/Crawler/Export/HtmlReport.php
@@ -1108,7 +1108,11 @@ public function getSuperTableForUrlAnalysis(string $analysisName): ?SuperTable
                             $detail = str_replace(' display="block', '', $detail);
                             // add SVG size to the detail if detail contains only SVG
                             if (str_starts_with($detail, '<')) {
-                                return Utils::getFormattedSize(strlen($detail)) . ' ' . $detail;
+                                $isSvgIconSet = str_contains($detail, '<symbol') || str_contains($detail, '<g');
+                                $finalDetailHtml = $isSvgIconSet
+                                    ? (Utils::svgSetFillCurrentColor($detail) . ' ' . Utils::svgSetToPreview($detail))
+                                    : Utils::svgSetFillCurrentColor($detail);
+                                return Utils::getFormattedSize(strlen($detail)) . ' ' . $finalDetailHtml;
                             } else {
                                 return $detail;
                             }

diff --git a/src/Crawler/Export/HtmlReport/template.html b/src/Crawler/Export/HtmlReport/template.html
@@ -637,6 +637,21 @@
             box-sizing: border-box;
         }
 
+        .iconset-preview {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+            justify-content: flex-start;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .iconset-icon {
+            max-width: 20px;
+            max-height: 20px;
+            height: auto;
+        }
+
         {$tabsCss}
 
     </style>

diff --git a/src/Crawler/Utils.php b/src/Crawler/Utils.php
@@ -1028,4 +1028,65 @@ public static function mb_str_pad($input, $pad_length, $pad_string = ' ', $pad_t
         return str_pad($input, $pad_length + $diff, $pad_string, $pad_type);
     }
 
+    /**
+     * Convert SVG set with multiple symbols to HTML preview of all symbols
+     * @param string $svgSet
+     * @return string|null
+     */
+    public static function svgSetToPreview(string $svgSet): ?string
+    {
+        if (!str_contains($svgSet, '<svg')) {
+            return null;
+        }
+
+        $dom = new \DOMDocument();
+        @$dom->loadXML($svgSet);
+        $xpath = new \DOMXPath($dom);
+        $xpath->registerNamespace('svg', 'http://www.w3.org/2000/svg');
+
+        $iconsInSet = [];
+        $symbols = @$xpath->query('//svg/symbol');
+        $defsG = @$xpath->query('//svg:g');
+        if ($symbols && count($symbols) > 1) {
+            foreach($symbols as $symbol) {
+                $iconsInSet[] = $symbol;
+            }
+        }
+        if ($defsG && count($defsG) > 1) {
+            foreach($defsG as $g) {
+                $iconsInSet[] = $g;
+            }
+        }
+
+        if (!$iconsInSet) {
+            return null;
+        }
+
+        $html = 'Icon set: <div class="iconset-preview">';
+        foreach ($iconsInSet as $iconInSet) {
+            $id = $iconInSet->getAttribute('id');
+            if ($id) {
+                $html .= '<svg class="iconset-icon icon--' . htmlspecialchars($id) . '">';
+                $html .= '<use xlink:href="#' . htmlspecialchars($id) . '" />';
+                $html .= "</svg>\n";
+            }
+        }
+        $html .= '</div>';
+
+        return $html;
+    }
+
+    /**
+     * @param string $svg
+     * @return string
+     */
+    public static function svgSetFillCurrentColor(string $svg): string
+    {
+        return str_replace(
+            ['<svg ', '<symbol ', '<g '],
+            ['<svg fill="currentColor" ', '<symbol fill="currentColor" ', '<g fill="currentColor" '],
+            $svg
+        );
+    }
+
 }