TINU-93 feat: Vite SVG 세팅을 진행합니다.

package.json

@@ -48,7 +48,8 @@
     "storybook": "^8.4.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "eslintConfig": {
     "extends": [

src/assets/index.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite-plugin-svgr/client" />
+
+import IcRabbit from "./icons/ic_rabbit.svg?react";
+
+export { IcRabbit };

src/pages/Home.tsx

@@ -1,5 +1,11 @@
+import { IcRabbit } from "../assets";
+
 function Home() {
-  return <></>;
+  return (
+    <>
+      <IcRabbit />
+    </>
+  );
 }
 
 export default Home;

svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default value;
+}

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import svgr from 'vite-plugin-svgr'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
 })