feat: implement inline svg

Author: vannyle

Diff for: next.config.mjs

@@ -1,7 +1,59 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // basePath: '/inbox/playground',
-  // assetPrefix: '/inbox/playground/',
+  webpack(config) {
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports not ending in ".inline.svg"
+      {
+        test: /(?<!inline)\.svg$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 512,
+              publicPath: "/_next/static/svgs",
+              outputPath: "static/svgs",
+              fallback: "file-loader",
+            },
+          },
+          {
+            loader: "svgo-loader",
+          },
+        ],
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.inline.svg$/i,
+        use: [
+          {
+            loader: "@svgr/webpack",
+            options: {
+              svgo: true,
+              svgoConfig: {
+                plugins: [
+                  {
+                    name: "preset-default",
+                    params: {
+                      overrides: {
+                        removeViewBox: false,
+                      },
+                    },
+                  },
+                  "prefixIds",
+                ],
+              },
+            },
+          },
+        ],
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };
 
 export default nextConfig;