fix(): use DOMParser with "image/svg+xml" to parse svg

Author: weareoutman

bricks/icons/src/antd-icon/index.spec.ts

@@ -35,6 +35,7 @@ describe("eo-antd-icon", () => {
           height="1em"
           viewBox="64 64 896 896"
           width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <defs>
             <style />
@@ -77,6 +78,7 @@ describe("eo-antd-icon", () => {
           height="1em"
           viewBox="64 64 896 896"
           width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M148.2 674.6z"
@@ -134,6 +136,7 @@ describe("eo-antd-icon", () => {
           height="1em"
           viewBox="64 64 896 896"
           width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             d="M148.2 674.6z"
@@ -221,6 +224,7 @@ describe("eo-antd-icon", () => {
           height="1em"
           viewBox="64 64 896 896"
           width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
           <defs>
             <style />

bricks/icons/src/shared/SvgCache.ts

@@ -29,18 +29,15 @@ export function constructSvgElement(
   retryable: boolean,
   options?: ResolveIconOptions
 ): SVGResult | null {
-  const div = document.createElement("div");
-  div.innerHTML = content;
-
-  const svg = div.firstElementChild;
-  if (svg?.tagName?.toLowerCase() !== "svg")
-    return retryable ? CACHEABLE_ERROR : null;
-
   if (!parser) parser = new DOMParser();
-  const doc = parser.parseFromString(svg.outerHTML, "text/html");
-
-  const svgEl = doc.body.querySelector("svg");
-  if (!svgEl) return retryable ? CACHEABLE_ERROR : null;
+  // Requires `xmlns`for the SVG to be parsed correctly
+  const refinedContent = content.includes("xmlns=")
+    ? content
+    : content.replace(/(<svg)(\s)/i, '$1 xmlns="http://www.w3.org/2000/svg"$2');
+  const doc = parser.parseFromString(refinedContent, "image/svg+xml");
+  const svgEl = doc.documentElement;
+  if (!(svgEl instanceof SVGSVGElement))
+    return retryable ? CACHEABLE_ERROR : null;
 
   const titles = svgEl.querySelectorAll("title");
   for (const title of titles) {

bricks/icons/src/svg-icon/index.spec.ts

@@ -2,12 +2,7 @@ import { describe, test, expect } from "@jest/globals";
 import "./index.js";
 import type { SvgIcon } from "./index.js";
 
-(global as any).fetch = jest.fn(() =>
-  Promise.resolve({
-    ok: true,
-    text: () =>
-      Promise.resolve(
-        `<?xml version="1.0" encoding="UTF-8"?>
+const svgContent = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="15px" height="17px" viewBox="0 0 15 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g transform="translate(-1804.000000, -58.000000)" stroke="#595959">
@@ -17,8 +12,12 @@ import type { SvgIcon } from "./index.js";
             </g>
         </g>
     </g>
-</svg>`.replace(/>\s+</g, "><")
-      ),
+</svg>`.replace(/>\s+</g, "><");
+
+(global as any).fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    text: () => Promise.resolve(svgContent),
   })
 );
 
@@ -105,4 +104,64 @@ describe("eo-svg-icon", () => {
     (element as any)._render();
     expect(fetch).not.toBeCalled();
   });
+
+  test("use svg content", async () => {
+    const element = document.createElement("eo-svg-icon") as SvgIcon;
+    element.svgContent = svgContent;
+
+    expect(element.shadowRoot).toBeFalsy();
+    document.body.appendChild(element);
+    expect(element.shadowRoot).toBeTruthy();
+    await (global as any).flushPromises();
+    expect(element.shadowRoot?.childNodes).toMatchInlineSnapshot(`
+      NodeList [
+        <style>
+          icons.shadow.css
+        </style>,
+        <svg
+          height="1em"
+          version="1.1"
+          viewBox="0 0 15 17"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+            stroke="none"
+            stroke-width="1"
+          >
+            <g
+              stroke="currentColor"
+              transform="translate(-1804.000000, -58.000000)"
+            >
+              <g
+                transform="translate(1805.000000, 59.000000)"
+              >
+                <circle
+                  cx="6.512"
+                  cy="3.552"
+                  r="3.552"
+                />
+                <path
+                  d="M10.448,8.184 Z"
+                  stroke-linecap="square"
+                />
+              </g>
+            </g>
+          </g>
+        </svg>,
+      ]
+    `);
+    document.body.removeChild(element);
+    expect(element.shadowRoot?.childNodes.length).toBe(0);
+
+    // Re-connect
+    document.body.appendChild(element);
+    await (global as any).flushPromises();
+    expect(element.shadowRoot?.childNodes.length).toBe(2);
+    document.body.removeChild(element);
+    expect(element.shadowRoot?.childNodes.length).toBe(0);
+  });
 });