Inline logo as SVG 🚀

components/Header.tsx

@@ -1,12 +1,16 @@
 import Link from 'next/link';
 
+import LogoDark from '@/assets/logo-dark.svg';
+import LogoLight from '@/assets/logo-light.svg';
 import ThemeMenu from '@/components/ThemeMenu';
 
 const Header = () => (
   <header className="w-full p-4 md:px-8">
     <div className="flex items-center justify-between pb-4">
       <Link className="flex items-center gap-2" href="/">
-        <img className="inline h-6" src="/icon.svg" alt="" /> Domain Digger
+        <LogoDark className="inline h-6 dark:hidden" />
+        <LogoLight className="hidden h-6 dark:inline" />
+        Domain Digger
       </Link>
       <ThemeMenu />
     </div>

next.config.js

@@ -1,6 +1,37 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack(config, { isServer }) {
+    // Configures webpack to handle SVG files with SVGR. SVGR optimizes and transforms SVG files
+    // into React components. See https://react-svgr.com/docs/next/
+
+    // Grab the existing rule that handles SVG imports
+    // @ts-ignore - rules is a private property that is not typed
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg')
+    );
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -51,6 +51,7 @@
     "whoiser": "^1.17.1"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/dns-packet": "^5.6.0",
     "@types/leaflet": "^1.9.3",