Merge pull request #13 from Codeit-Part4-SFJs/hj/icon

feat: Icon(Icon, Loading, Logo) 공통 컴포넌트 구현

next.config.mjs

@@ -1,4 +1,30 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    webpack(config) {
+
+        const fileLoaderRule = config.module.rules.find((rule) =>
+            rule.test?.test?.('.svg'),
+        )
+
+        config.module.rules.push(
+            {
+                ...fileLoaderRule,
+                test: /\.svg$/i,
+                resourceQuery: /url/,
+            },
+
+            {
+                test: /\.svg$/i,
+                issuer: fileLoaderRule.issuer,
+                resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+                use: ['@svgr/webpack'],
+            },
+        )
+
+        fileLoaderRule.exclude = /\.svg$/i
+
+        return config
+    },
+};
 
 export default nextConfig;

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "autoprefixer": "^10.4.19",
     "next": "14.2.3",
+    "next-plugin-svgr": "^1.1.10",
     "react": "^18",
     "react-dom": "^18",
     "react-query": "^3.39.3",
@@ -29,6 +30,7 @@
     "@storybook/nextjs": "^8.1.1",
     "@storybook/react": "^8.1.1",
     "@storybook/test": "^8.1.1",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",