SVG Vite Plugin Configuration
Vite's plugin ecosystem makes SVG-as-component imports simple to set up — here's the standard configuration for most frameworks.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
vite-plugin-svgr Setup
Install `vite-plugin-svgr` and add it to `vite.config.ts`'s plugins array — this enables `import Logo from './logo.svg?react'` syntax (the `?react` suffix distinguishes component imports from Vite's default URL-string import behavior for `.svg` files), producing a fully typed React component.
- vite-plugin-svgr adds ?react suffix support for component imports
- Default .svg imports without the suffix remain URL strings
- Fully typed with TypeScript when using the React variant
Framework Variants and Alternatives
Solid, Vue, and Svelte each have their own Vite SVG plugins (`vite-plugin-solid-svg`, `vite-svg-loader` for Vue, `vite-plugin-svelte-svg`) following similar patterns — check your framework's ecosystem for the maintained equivalent rather than assuming the React-specific plugin applies universally.
- Each framework has its own dedicated Vite SVG component plugin
- Plugin APIs follow similar conventions but aren't interchangeable
- Verify plugin maintenance status before adopting for production
Frequently Asked Questions
What's the default behavior for .svg imports without any plugin?
Vite treats .svg files as static assets by default, so a plain import returns a URL string you can use in an <img src> — the plugin is only needed for the component-import pattern.
Can I use SVGO optimization alongside vite-plugin-svgr?
Yes — vite-plugin-svgr accepts SVGO configuration options, letting you optimize the SVG's internal markup (removing redundant attributes, simplifying paths) as part of the same import pipeline.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG