chore: vite-plugin-svgr 플러그인 설치 및 세팅 (#6)

package.json

@@ -19,6 +19,7 @@
     "styled-reset": "^4.5.2"
   },
   "devDependencies": {
+    "@svgr/rollup": "^8.1.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/recoil": "^0.0.9",
@@ -37,6 +38,7 @@
     "prettier": "^3.2.5",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

src/svg.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React from 'react';
+  const src: string;
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default src;
+}

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

tsconfig.json

@@ -24,6 +24,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "svg.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,8 +1,9 @@
+import svgr from '@svgr/rollup';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), svgr()],
 });