Registry / web-framework / vite-plugin-svgr-component

vite-plugin-svgr-component

library1.0.1jsnpmunverified

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.

web-framework

npm install vite-plugin-svgr-component

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVGR-C

vite-plugin-svgr-component

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

svgrComponent

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

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

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

CustomIcon

✓ import CustomIcon from './icon.svg'

✗ import { CustomIcon } from './icon.svg'

SVG files are default-exported as React components. Named import will result in undefined.

type definitions for client

✓ /// <reference types="vite-plugin-svgr-component/client" />

✗ import '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.

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;

Debug

Known issues

breakingESM-only package; require() will throw an error.

fix

Use import syntax instead of require().

affects: >=1.0.0

gotchaAll 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).

affects: >=1.0.0

gotchaTypeScript 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.

affects: >=1.0.0

deprecatedDefault behavior may change in future major versions; currently all .svg files are transformed.

fix

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

affects: 1.x

gotchaSVGR 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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: require() of ES Module not supported

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

fix

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

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

Attempting named import from SVG file instead of default import.

fix

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

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

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.

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

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

fix

Add the triple-slash reference directive mentioned above.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency; the plugin generates React components from SVGs.

viterequiredPeer dependency; this is a Vite plugin.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/chempogonzalez/vite-plugin-svgr-component ↗

packagehttps://www.npmjs.com/package/vite-plugin-svgr-component ↗