Upgrade to webpack@5 (#4894)

src/renderer/components/icon/icon.tsx

@@ -11,6 +11,7 @@ import type { LocationDescriptor } from "history";
 import { boundMethod, cssNames } from "../../utils";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
+import { decode } from "../../../common/utils/base64";
 
 export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   material?: string;          // material-icon, see available names at https://material.io/icons/
@@ -36,6 +37,10 @@ export class Icon extends React.PureComponent<IconProps> {
     focusable: true,
   };
 
+  static isSvg(content: string) {
+    return String(content).includes("svg+xml"); // data-url for raw svg-icon
+  }
+
   get isInteractive() {
     const { interactive, onClick, href, link } = this.props;
 
@@ -58,7 +63,7 @@ export class Icon extends React.PureComponent<IconProps> {
     switch (evt.nativeEvent.code) {
       case "Space":
 
-        // fallthrough
+      // fallthrough
       case "Enter": {
         this.ref.current?.click();
         evt.preventDefault();
@@ -98,9 +103,12 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (typeof svg === "string") {
-      const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
+      const dataUrlPrefix = "data:image/svg+xml;base64,";
+      const svgIconDataUrl = svg.startsWith(dataUrlPrefix) ? svg : require(`./${svg}.svg`);
+      const svgIconText = typeof svgIconDataUrl == "string" // decode xml from data-url
+        ? decode(svgIconDataUrl.replace(dataUrlPrefix, "")) : "";
 
-      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
+      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }} />;
     }
 
     // render as material-icon
@@ -128,7 +136,7 @@ export class Icon extends React.PureComponent<IconProps> {
     }
 
     if (href) {
-      return <a {...iconProps} href={href} ref={this.ref}/>;
+      return <a {...iconProps} href={href} ref={this.ref} />;
     }
 
     return <i {...iconProps} ref={this.ref} />;