build: support importing SVG as modules

Author: h4l

jest-webpack-asset-source-transformer.js

@@ -0,0 +1,15 @@
+/**
+ * A Jest SyncTransformer that mimics a webpack asset/source module.
+ *
+ * i.e. it allows importing a file by transforming the file into a CommonJS
+ * module that exports the file's contents as a string.
+ */
+const WebpackAssetSourceTransformer = {
+  process(sourceText) {
+    return {
+      code: `module.exports = ${JSON.stringify(sourceText)};`,
+    };
+  },
+};
+
+module.exports = WebpackAssetSourceTransformer;

jest.config.js

@@ -14,4 +14,7 @@ module.exports = {
   maxWorkers: 1,
   testPathIgnorePatterns: ["/node_modules/", ".mock."],
   setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
+  transform: {
+    "\\.svg$": "<rootDir>/jest-webpack-asset-source-transformer",
+  },
 };

src/webpack-assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const source: string;
+  export default source;
+}

webpack-config.ts

@@ -20,6 +20,10 @@ const config: Configuration = {
         test: /\.css$/,
         use: ["style-loader", "css-loader", "postcss-loader"],
       },
+      {
+        test: /\.svg$/,
+        type: "asset/source",
+      },
     ],
   },
   resolve: {