Replace SVGR with logo component

Author: foxeddev

app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import Logo from "@/public/img/logo.svg";
+import Logo from "@/components/Logo";
 import Card from "@/components/Card";
 import toast from "react-hot-toast";
 

components/Logo.tsx

@@ -0,0 +1,31 @@
+export default function Logo({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="256"
+      height="256"
+      viewBox="0 0 256 256"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M128 224L48 170.667V64L128 117.333L208 64V170.667L128 224Z"
+        stroke="currentColor"
+        stroke-width="12"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M117.333 160L90.6667 144V176L117.333 160Z"
+        stroke="currentColor"
+        stroke-width="12"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M165.333 144L138.667 160L165.333 176V144Z"
+        stroke="currentColor"
+        stroke-width="12"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

next.config.ts

@@ -1,35 +1,5 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-  webpack(config) {
-    // # SVGR config
-
-    // Grab the existing rule that handles SVG imports
-    const fileLoaderRule = config.module.rules.find((rule: any) =>
-      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;
-  },
-};
+const nextConfig: NextConfig = {};
 
 export default nextConfig;

package.json

@@ -17,7 +17,6 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",