fix(webpack): svgr import 수정

KMU-WINK · Sep 19, 2024 · 4a11f3f · 4a11f3f
1 parent ad04be1
commit 4a11f3f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/image.d.ts b/image.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg?url' {
+  const content: any;
+  export default content;
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -23,10 +23,23 @@ const nextConfig = {
     ],
   },
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack'],
-    });
+    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;
   },

diff --git a/src/component/activity/ProfileCard.tsx b/src/component/activity/ProfileCard.tsx
@@ -12,7 +12,7 @@ import { useForm } from '@/hook';
 
 import { WinkApi } from '@/api';
 
-import avatarImage from '@/public/profile.svg';
+import avatarImage from '@/public/profile.svg?url';
 
 import * as yup from 'yup';
 

diff --git a/src/component/page/Footer.tsx b/src/component/page/Footer.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import Image, { StaticImageData } from 'next/image';
 import Link from 'next/link';
 
-import Logo from '@/public/footer/logo.svg';
-import GithubIcon from '@/public/icon/footer/github.svg';
-import InstagramIcon from '@/public/icon/footer/instagram.svg';
-import TistoryIcon from '@/public/icon/footer/tistory.svg';
+import Logo from '@/public/footer/logo.svg?url';
+import GithubIcon from '@/public/icon/footer/github.svg?url';
+import InstagramIcon from '@/public/icon/footer/instagram.svg?url';
+import TistoryIcon from '@/public/icon/footer/tistory.svg?url';
 
 interface Link {
   id: string;

diff --git a/src/component/page/Header.tsx b/src/component/page/Header.tsx
@@ -15,7 +15,7 @@ import { WinkApi } from '@/api';
 
 import Dropdown from '@/public/icon/arrow-down.svg';
 import logo from '@/public/logo.png';
-import avatar from '@/public/profile.svg';
+import avatar from '@/public/profile.svg?url';
 
 import { AnimatePresence, motion } from 'framer-motion';