vite-plugin-svgr-component

1.0.1 verified Mon Apr 27 auth: no javascript

A Vite plugin that imports SVG files as React components using SVGR, with zero-config defaults and full configurability. v1.0.1 is the current stable version, with slow release cadence. It automatically transforms all SVG imports to React components without needing a query string like ?component, different from other SVGR Vite plugins. Ships TypeScript types, uses SVGO for optimization, and supports micromatch patterns to filter which SVGs are transformed. Requires peer dependencies: react >= 17.0.2 and vite >= 2.7.13.

Common errors

error Error: require() of ES Module not supported ↓

cause Using CommonJS require() to import an ESM-only package.

fix

Change to import { svgrComponent } from 'vite-plugin-svgr-component'

error Module '"./icon.svg"' has no exported member 'Icon'. ↓

cause Attempting named import from SVG file instead of default import.

fix

Use import Icon from './icon.svg' (default import).

error Cannot find module 'vite-plugin-svgr-component/client' or its corresponding type declarations. ↓

cause Tried to import the client type definitions with an import statement instead of a triple-slash reference.

fix

Use /// <reference types="vite-plugin-svgr-component/client" /> in a .d.ts file.

error Type 'string' is not assignable to type 'SVGComponentProps' ↓

cause In TypeScript using the component without the client type reference, so props are typed incorrectly.

fix

Add the triple-slash reference directive mentioned above.

Warnings

breaking ESM-only package; require() will throw an error. ↓

fix Use import syntax instead of require().

gotcha All SVG imports are automatically transformed to React components; there is no ?component query parameter. ↓

fix If you need the raw SVG URL or file content, use a different import approach (e.g., ?url or ?raw).

gotcha TypeScript projects must reference the client types via triple-slash directive; otherwise, SVG imports will be typed as any. ↓

fix Add /// <reference types="vite-plugin-svgr-component/client" /> to your vite-env.d.ts file.

deprecated Default behavior may change in future major versions; currently all .svg files are transformed. ↓

fix Use importStringPattern to restrict which files are transformed (best practice).

gotcha SVGR options object is directly passed; some options may conflict with the plugin's defaults (e.g., icon vs. custom dimensions). ↓

fix Test SVGR option combinations; refer to SVGR documentation.

Install

npm install vite-plugin-svgr-component

yarn add vite-plugin-svgr-component

pnpm add vite-plugin-svgr-component

Imports

svgrComponent

wrong

const svgrComponent = require('vite-plugin-svgr-component')

correct

import { svgrComponent } from 'vite-plugin-svgr-component'

ESM-only; named export. CommonJS require will cause an error.

CustomIcon
wrong
```
import { CustomIcon } from './icon.svg'
```
correct
```
import CustomIcon from './icon.svg'
```
SVG files are default-exported as React components. Named import will result in undefined.
type definitions for client
wrong
```
import 'vite-plugin-svgr-component/client'
```
correct
```
/// <reference types="vite-plugin-svgr-component/client" />
```
For TypeScript projects, add a triple-slash reference directive in a .d.ts file (typically vite-env.d.ts). A regular import will not register the types.

Quickstart

Configures the plugin in vite.config.ts with default options, then imports an SVG as a React component and uses it with optional title and titleId props.

// vite.config.ts
import { svgrComponent } from 'vite-plugin-svgr-component';

export default {
  plugins: [svgrComponent()],
};

// App.tsx
import Star from './star.svg';

function App() {
  return (
    <div>
      <Star title="star icon" titleId="star" />
    </div>
  );
}

export default App;