chore: file-loader 대신 svgr 사용

[#572]
woowacourse-teams · Aug 17, 2023 · c7eabc8 · c7eabc8
1 parent c93eaf1
commit c7eabc8
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 17 deletions.
diff --git a/frontend/src/components/common/Loading/Loading.tsx b/frontend/src/components/common/Loading/Loading.tsx
@@ -9,7 +9,7 @@ function Loading() {
         열심히 로딩하고 있어요<span>잠시만 기다려 주세요...</span>
       </Message>
       <LoadingSvgContainer>
-        <img src={LoadingSvg} alt="로딩중" />
+        <LoadingSvg />
       </LoadingSvgContainer>
     </>
   );

diff --git a/frontend/src/types/assets.d.ts b/frontend/src/types/assets.d.ts
@@ -1,6 +1,6 @@
 declare module '*.svg' {
   import React = require('react');
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export const ReactComponent: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
   const src: string;
-  export default src;
+  export default content;
 }
diff --git a/frontend/webpack.config.dev.js b/frontend/webpack.config.dev.js
@@ -40,11 +40,7 @@ module.exports = function () {
           test: /\.svg$/,
           use: [
             {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: 'assets/',
-              },
+              use: ['@svgr/webpack'],
             },
           ],
         },

diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js
@@ -35,15 +35,7 @@ module.exports = function () {
         },
         {
           test: /\.svg$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: 'assets/',
-              },
-            },
-          ],
+          use: ['@svgr/webpack'],
         },
       ],
     },