feat(): support svg icon with content

Author: weareoutman

bricks/icons/src/shared/SvgCache.ts

@@ -14,6 +14,65 @@ interface ResolveIconOptions {
   replaceSource?(source: string): string;
 }
 
+export function constructSvgElement(
+  content: string,
+  retryable: false,
+  options?: ResolveIconOptions
+): SVGSVGElement | null;
+export function constructSvgElement(
+  content: string,
+  retryable: true,
+  options?: ResolveIconOptions
+): SVGResult;
+export function constructSvgElement(
+  content: string,
+  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;
+
+  const titles = svgEl.querySelectorAll("title");
+  for (const title of titles) {
+    title.remove();
+  }
+
+  if (options?.currentColor) {
+    const colorProps = [
+      "color",
+      "fill",
+      "stroke",
+      "stop-color",
+      "flood-color",
+      "lighting-color",
+    ];
+    for (const prop of colorProps) {
+      const elements = svgEl.querySelectorAll(
+        `[${prop}]:not([${prop}="none"])`
+      );
+      for (const e of elements) {
+        if (!belongToMask(e, svgEl)) {
+          e.setAttribute(prop, "currentColor");
+        }
+      }
+    }
+  }
+
+  svgEl.setAttribute("width", "1em");
+  svgEl.setAttribute("height", "1em");
+  return document.adoptNode(svgEl);
+}
+
 /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
 async function resolveIcon(
   url: string,
@@ -29,47 +88,8 @@ async function resolveIcon(
   }
 
   try {
-    const div = document.createElement("div");
-    div.innerHTML = await fileData.text();
-
-    const svg = div.firstElementChild;
-    if (svg?.tagName?.toLowerCase() !== "svg") return CACHEABLE_ERROR;
-
-    if (!parser) parser = new DOMParser();
-    const doc = parser.parseFromString(svg.outerHTML, "text/html");
-
-    const svgEl = doc.body.querySelector("svg");
-    if (!svgEl) return CACHEABLE_ERROR;
-
-    const titles = svgEl.querySelectorAll("title");
-    for (const title of titles) {
-      title.remove();
-    }
-
-    if (options?.currentColor) {
-      const colorProps = [
-        "color",
-        "fill",
-        "stroke",
-        "stop-color",
-        "flood-color",
-        "lighting-color",
-      ];
-      for (const prop of colorProps) {
-        const elements = svgEl.querySelectorAll(
-          `[${prop}]:not([${prop}="none"])`
-        );
-        for (const e of elements) {
-          if (!belongToMask(e, svgEl)) {
-            e.setAttribute(prop, "currentColor");
-          }
-        }
-      }
-    }
-
-    svgEl.setAttribute("width", "1em");
-    svgEl.setAttribute("height", "1em");
-    return document.adoptNode(svgEl);
+    const content = await fileData.text();
+    return constructSvgElement(content, true, options);
   } catch {
     return CACHEABLE_ERROR;
   }

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

@@ -5,7 +5,7 @@ import {
   type EventEmitter,
 } from "@next-core/element";
 import { wrapLocalBrick } from "@next-core/react-element";
-import { getIcon } from "../shared/SvgCache.js";
+import { constructSvgElement, getIcon } from "../shared/SvgCache.js";
 import { getImageUrl } from "../shared/getImageUrl.js";
 import type { IconEvents, IconEventsMapping } from "../shared/interfaces.js";
 import sharedStyleText from "../shared/icons.shadow.css";
@@ -14,6 +14,7 @@ const { defineElement, property, event } = createDecorators();
 
 export interface SvgIconProps {
   imgSrc?: string;
+  svgContent?: string;
   noPublicRoot?: boolean;
 }
 
@@ -23,6 +24,8 @@ class SvgIcon extends NextElement implements SvgIconProps {
   /** 图标地址 */
   @property() accessor imgSrc: string | undefined;
 
+  @property() accessor svgContent: string | undefined;
+
   @property({
     type: Boolean,
   })
@@ -60,13 +63,18 @@ class SvgIcon extends NextElement implements SvgIconProps {
     if (!this.isConnected || !this.shadowRoot) {
       return;
     }
-    const url = getImageUrl(this.imgSrc, this.noPublicRoot);
-
-    const svg = await getIcon(url, { currentColor: true });
-    if (url !== getImageUrl(this.imgSrc, this.noPublicRoot)) {
-      // The icon has changed during `await getIcon(...)`
-      return;
+    let svg: SVGElement | null = null;
+    if (this.svgContent) {
+      svg = constructSvgElement(this.svgContent, false, { currentColor: true });
+    } else {
+      const url = getImageUrl(this.imgSrc, this.noPublicRoot);
+      svg = await getIcon(url, { currentColor: true });
+      if (url !== getImageUrl(this.imgSrc, this.noPublicRoot)) {
+        // The icon has changed during `await getIcon(...)`
+        return;
+      }
     }
+
     // Currently React can't render mixed React Component and DOM nodes which are siblings,
     // so we manually construct the DOM.
     const nodes: Node[] = [];