avoid use import svg file

since viewBox will be removed when bundled for prod
parcel-bundler/parcel#1523

package.json

@@ -59,6 +59,15 @@
         "resources": [
           "options.html"
         ]
+      },
+      {
+        "resources": [
+          "~assets/icon.svg"
+        ],
+        "matches": [
+          "http://*/*",
+          "https://*/*"
+        ]
       }
     ],
     "commands": {

src/contents/panel.tsx

@@ -2,7 +2,6 @@ import { Storage } from "@plasmohq/storage"
 import baseCssText from "data-text:~/style.css"
 import type { PlasmoCSConfig, PlasmoGetOverlayAnchor } from "plasmo"
 import { useEffect, useMemo, useRef, useState } from "react"
-import logo from "url:~assets/icon.svg"
 import { ResultTextArea } from "~components/contents"
 import ProviderInfo from "~components/provider-info"
 import { ConfigKeys, PanelPosition, Theme, urlNormalize } from "~config"
@@ -177,7 +176,7 @@ const PanelOverlay = () => {
               </button>
               <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-row items-center gap-1">
                 <img
-                  src={logo}
+                  src={chrome.runtime.getURL("assets/icon.svg")}
                   className="h-6 w-6 rounded-lg object-scale-down"
                 />
                 <span className="font-[cursive]">Recap</span>

src/utils/action-icon/icon-data.ts

@@ -1,5 +1,4 @@
 import colors from "tailwindcss/colors"
-import iconFile from "url:~/assets/icon.svg"
 import type { EnabledDetails } from "~hooks"
 import { grayscaleImage } from "~utils/action-icon/utils"
 
@@ -60,12 +59,9 @@ function getIconData(
   transform?: (svg: SVGSVGElement) => boolean
 ) {
   return new Promise<ImageData>(async (resolve, reject) => {
-    const resp = await fetch(iconFile)
-    const doc = new window.DOMParser().parseFromString(
-      await resp.text(),
-      "text/xml"
-    )
-
+    const resp = await fetch(chrome.runtime.getURL("assets/icon.svg"))
+    const xml = await resp.text()
+    const doc = new window.DOMParser().parseFromString(xml, "image/svg+xml")
     const svg = doc.querySelector("svg")
     if (svg === undefined) {
       throw TypeError("input is not a SVG xml")