Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
svgr
✓ import svgr from 'vite-plugin-svgr'
✗ const svgr = require('vite-plugin-svgr')
Default import is the standard; CommonJS require may not work with ESM-only configuration.
default export with ?react
✓ import Logo from './logo.svg?react'
✗ import Logo from './logo.svg'
The ?react query is required in v4+ to trigger SVG transformation. Without it, the file is treated as a regular asset URL.
TypeScript declaration
✓ /// <reference types="vite-plugin-svgr/client" />
✗ /// <reference types="vite-plugin-svgr" />
The correct path is 'vite-plugin-svgr/client', not just 'vite-plugin-svgr'.
default export (SVG source)
✓ import svgUrl from './logo.svg'
Importing without ?react gives the SVG file URL string, not a React component.
Demonstrates how to set up vite-plugin-svgr in a Vite project with React, including import syntax and TypeScript declaration.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [
react(),
svgr({
svgrOptions: {
icon: true,
expandProps: 'end',
},
include: '**/*.svg?react',
}),
],
});
// App.tsx
import ReactLogo from './logo.svg?react';
function App() {
return (
<div>
<ReactLogo width={100} height={100} />
</div>
);
}
export default App;
// vite-env.d.ts
/// <reference types="vite-plugin-svgr/client" />
Errors
Common errors & fixes
Uncaught Error: @svgr/core tried to access @svgr/plugin-svgo but it's not installed
SVGO plugin not installed but configured in svgrOptions.plugins.
fixInstall @svgr/plugin-svgo as a dependency.
Module not found: Error: Can't resolve 'vite-plugin-svgr'
Package not installed or mismatched Vite version.
fixRun npm install -D vite-plugin-svgr and ensure Vite >=3 is installed.
Cannot find module 'vite-plugin-svgr' or its corresponding type declarations.
Missing TypeScript declaration for SVG imports.
fixAdd /// <reference types="vite-plugin-svgr/client" /> in a .d.ts file.
The requested module 'vite-plugin-svgr' does not provide an export named 'default'
Using CommonJS require in a project that expects ESM import.
fixUse import svgr from 'vite-plugin-svgr' instead of require()
Audit
Dependencies
viterequiredPeer dependency; plugin designed for Vite build tool
@svgr/corerequiredCore SVGR transformation library (lazy loaded since v5.1.0)
@svgr/plugin-svgooptionalOptional plugin for SVGO optimization if configured