prepare to import svg

esbuild.config.mjs

@@ -18,6 +18,9 @@ esbuild
     banner: {
       js: banner,
     },
+    loader: {
+      ".svg": "text",
+    },
     entryPoints: ["./src/main.ts"],
     bundle: true,
     external: [

package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@types/chai": "^4.2.22",
     "@types/chai-as-promised": "^7.1.4",
+    "@types/jsdom": "^16.2.13",
     "@types/mime-types": "^2.1.1",
     "@types/mocha": "^9.0.0",
     "@types/node": "^14.14.37",
@@ -32,6 +33,7 @@
     "cross-env": "^7.0.3",
     "dotenv": "^10.0.0",
     "esbuild": "^0.14.0",
+    "jsdom": "^19.0.0",
     "mocha": "^9.1.3",
     "prettier": "^2.4.1",
     "ts-loader": "^9.2.6",

src/misc.ts

@@ -155,3 +155,11 @@ export const getPathFolder = (a: string) => {
 export const setToString = (a: Set<string>, delimiter: string = ",") => {
   return [...a].join(delimiter);
 };
+
+export const extractSvgSub = (x: string, subEl: string = "rect") => {
+  const parser = new window.DOMParser();
+  const dom = parser.parseFromString(x, "image/svg+xml");
+  const svg = dom.querySelector("svg");
+  svg.setAttribute("viewbox", "0 0 10 10");
+  return svg.innerHTML;
+};

tests/misc.test.ts

@@ -1,6 +1,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import { expect } from "chai";
+import { JSDOM } from "jsdom";
 
 import * as misc from "../src/misc";
 
@@ -133,3 +134,17 @@ describe("Misc: get dirname", () => {
     expect(y).to.equal("/");
   });
 });
+
+describe("Misc: extract svg", () => {
+  beforeEach(function () {
+    const fakeBrowser = new JSDOM("");
+    global.window = fakeBrowser.window as any;
+  });
+
+  it("should extract rect from svg correctly", () => {
+    const x = "<svg><rect/><g/></svg>";
+    const y = misc.extractSvgSub(x);
+    // console.log(x)
+    expect(y).to.equal("<rect/><g/>");
+  });
+});

webpack.config.js

@@ -33,6 +33,10 @@ module.exports = {
         use: "ts-loader",
         exclude: /node_modules/,
       },
+      {
+        test: /\.svg?$/,
+        type: "asset/source",
+      },
     ],
   },
   resolve: {