feat: @svgr/webpack을 이용한 svg 컴포넌트화 MARA-12

next.config.js

@@ -1,6 +1,21 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  webpack: (config) => {
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: [
+          ...(config.module.rules || []),
+          {
+            test: /\.svg$/,
+            use: ['@svgr/webpack'],
+          },
+        ],
+      },
+    };
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -37,6 +37,7 @@
     "@storybook/nextjs": "7.6.3",
     "@storybook/react": "7.6.3",
     "@storybook/test": "7.6.3",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/pages/index.tsx

@@ -1,6 +1,8 @@
-import { Inter } from 'next/font/google'
+import AppleIconSvg from '../assets/icons/Frame 35.svg';
+import { AppleIcon } from '@/components/atoms/icons/FoodIcons';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export default function Home(): JSX.Element {
   return (
@@ -9,7 +11,9 @@ export default function Home(): JSX.Element {
     >
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
         mara web
+        <AppleIconSvg />
+        <AppleIcon />
       </div>
     </main>
-  )
+  );
 }