How to import SVG as React Component with Vite and TypeScript

1. Install vite-plugin-svgr

This plugin transforms SVG files into React components. Choose your package manager to install:

npm install –save-dev vite-plugin-svgr

yarn add -D vite-plugin-svgr

pnpm add -D vite-plugin-s…


This content originally appeared on DEV Community and was authored by vrauuss softwares

1. Install vite-plugin-svgr

This plugin transforms SVG files into React components. Choose your package manager to install:

npm install --save-dev vite-plugin-svgr

yarn add -D vite-plugin-svgr

pnpm add -D vite-plugin-svgr

2. Setup vite.config.ts

  • First, import the plugin: 
import svgr from "vite-plugin-svgr";
  • Next, add the plugin to your defineConfig: 
svgr()
  • The finished structure should look like this: 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), svgr()]
});

3. Add Types to vite-env.d.ts

  • Enable TypeScript support for SVG props like className, width, and height. 
/// <reference types="vite-plugin-svgr/client" />

4. Import with ?react suffix and use SVG as Component

  • Import the SVG file with the ?react suffix: 
import Logo from "./assets/icons/logo.svg?react";
  • Use the imported SVG as a React component: 
<Logo className="w-8 h-8 fill-red-500" />

Contact

Articles

Upcoming Articles

  • How to Change the Size of an SVG with CSS
  • How to Disable SVG Preview Mode

References


This content originally appeared on DEV Community and was authored by vrauuss softwares


Print Share Comment Cite Upload Translate Updates
APA

vrauuss softwares | Sciencx (2025-03-23T13:01:17+00:00) How to import SVG as React Component with Vite and TypeScript. Retrieved from https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/

MLA
" » How to import SVG as React Component with Vite and TypeScript." vrauuss softwares | Sciencx - Sunday March 23, 2025, https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/
HARVARD
vrauuss softwares | Sciencx Sunday March 23, 2025 » How to import SVG as React Component with Vite and TypeScript., viewed ,<https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/>
VANCOUVER
vrauuss softwares | Sciencx - » How to import SVG as React Component with Vite and TypeScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/
CHICAGO
" » How to import SVG as React Component with Vite and TypeScript." vrauuss softwares | Sciencx - Accessed . https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/
IEEE
" » How to import SVG as React Component with Vite and TypeScript." vrauuss softwares | Sciencx [Online]. Available: https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/. [Accessed: ]
rf:citation
» How to import SVG as React Component with Vite and TypeScript | vrauuss softwares | Sciencx | https://www.scien.cx/2025/03/23/how-to-import-svg-as-react-component-with-vite-and-typescript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts