feat(package): add vite-plugin-svgr support for importing svg files a…

…s react component
mayurDayal2000 · Dec 16, 2024 · 8f0b924 · 8f0b924
1 parent 23bb441
commit 8f0b924
Show file tree

Hide file tree

Showing 5 changed files with 316 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "globals": "^15.12.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
-    "vite": "^6.0.1"
+    "vite": "^6.0.1",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "packageManager": "yarn@4.5.3"
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,10 +1,10 @@
-import reactLogo from "@assets/react.svg";
+import ReactLogo from "@assets/react.svg?react";
 
 function HomePage() {
   return (
     <>
       <h1>Welcome to My World!</h1>
-      <img src={reactLogo} className="logo react" alt="React logo" />
+      <ReactLogo className="logo react" />
     </>
   );
 }

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
+import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
   resolve: {
     alias: {
       "@pages": resolve(__dirname, "src/pages"),
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference types="vite/client" />
		/// <reference types="vite-plugin-svgr/client" />