Merge pull request #14 from geulDa/setting/#11/svg-sprite-setting

Setting: svg sprite setting

Author: jjangminii

next.config.ts

@@ -1,8 +1,36 @@
-import type { NextConfig } from "next";
+import path from 'path';
+import type { NextConfig } from 'next';
+
+const ICON_DIR = path.resolve(__dirname, 'src/shared/icons/source');
 
 const nextConfig: NextConfig = {
-  /* config options here */
   reactStrictMode: true,
+  webpack: (config) => {
+    const svgRule = config.module.rules.find(
+      // @ts-ignore
+      (rule) => rule.test && rule.test.test && rule.test.test('.svg'),
+    );
+    if (svgRule) {
+      // @ts-ignore
+      svgRule.exclude = [...(svgRule.exclude || []), ICON_DIR];
+    }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      include: [ICON_DIR],
+      use: [
+        {
+          loader: require.resolve('svg-sprite-loader'),
+          options: {
+            symbolId: 'icon-[name]',
+            extract: false,
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
 };
 
 export default nextConfig;

package.json

@@ -6,14 +6,19 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "icons:clean": "svgo -r -f src/shared/icons/source --config=./svgo.config.mjs --multipass",
+    "icons:gen": "pnpm dlx tsx src/shared/icons/scripts/generate-icon-list.ts ",
+    "icons": "pnpm icons:clean && pnpm icons:gen"
   },
   "dependencies": {
     "axios": "^1.12.2",
+    "clsx": "^2.1.1",
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-hook-form": "^7.64.0"
+    "react-hook-form": "^7.64.0",
+    "svgo": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -23,6 +28,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
+    "svg-sprite-loader": "^6.0.11",
     "tailwindcss": "4.1.14",
     "typescript": "^5"
   }