Registry / web-framework / vite-plugin-fast-react-svg

vite-plugin-fast-react-svg

library0.6.2jsnpmunverified

vite-plugin-fast-react-svg (v0.6.2) transforms SVG files into React components without Babel, using regex and dangerouslySetInnerHTML for near-instant processing. Requires Vite 6.3+/7/8 and React 18 or 19. Key differentiator vs. svgr: no AST/Babel overhead, orders of magnitude faster for large projects. Supports only optimized SVGs (svgo with convertStyleToAttrs). ESM-only since v0.5.0, Node 18+. Ships TypeScript types. Releases follow Vite major updates; breaking changes are infrequent but significant (drop of ?inline, option removal, import changes). Usually released every few months.

web-framework

npm install vite-plugin-fast-react-svg

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-FAST-R

vite-plugin-fast-react-svg

web-frameworkjavascriptv0.6.2

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–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

svgPlugin

✓ import { svgPlugin } from 'vite-plugin-fast-react-svg';

✗ import svgPlugin from 'vite-plugin-fast-react-svg';

Named export only. Default import was removed in v0.2.0.

SVG import

✓ import Logo from './logo.svg';

TypeScript needs type augmentation. Add 'vite-plugin-fast-react-svg/types' to tsconfig compilerOptions.types or reference in .d.ts.

svgToJS

✓ import { svgToJS } from 'vite-plugin-fast-react-svg';

✗ import { svgToJSX } from 'vite-plugin-fast-react-svg';

svgToJSX was removed in v0.4.0. Use svgToJS instead.

Configure Vite plugin, add TypeScript types, then import SVG as React component.

// vite.config.ts import { defineConfig } from 'vite'; import { svgPlugin } from 'vite-plugin-fast-react-svg'; export default defineConfig({ plugins: [svgPlugin()], }); // tsconfig.json { "compilerOptions": { "types": ["vite-plugin-fast-react-svg/types", "vite/client"] } } // App.tsx import Logo from './logo.svg'; export default function App() { return <Logo width={100} height={100} />; }

Debug

Known issues

breakingDefault export removed in v0.2.0 – use named export `svgPlugin`.

fix

Change `import svgPlugin from 'vite-plugin-fast-react-svg'` to `import { svgPlugin } from 'vite-plugin-fast-react-svg'`.

affects: >=0.2.0

breaking`svgToJSX` renamed to `svgToJS` in v0.4.0 and `?inline` support dropped in v0.5.0.

fix

Replace `import { svgToJSX }` with `import { svgToJS }`. Remove `?inline` suffix from imports; Vite 5 core now inlines SVGs.

affects: >=0.4.0

breakingESM-only since v0.5.0; Node 18+ required. CommonJS `require()` will fail.

fix

Ensure your project uses ESM (type: module in package.json) and Node 18+.

affects: >=0.5.0

breakingPeer dependency change: requires Vite 6.3+ (or 7, 8). Older Vite 5 not supported since v0.5.0.

fix

Upgrade Vite to ^6.3 || ^7 || ^8.

affects: >=0.5.0

gotchaSVG must be pre-optimized with svgo and `convertStyleToAttrs`; inline styles not converted will break.

fix

Run SVGs through svgo with convertStyleToAttrs enabled, or manually convert styles to attributes.

affects: all

gotchaTypeScript users must add type augmentation; otherwise TS will error on SVG imports.

fix

Add `"vite-plugin-fast-react-svg/types"` to tsconfig compilerOptions.types.

affects: all

deprecatedOptions removed in v0.4.0; previously available options like `useInnerHTML` no longer exist.

fix

Remove any options object from `svgPlugin()` call – it takes no arguments.

affects: >=0.4.0

Errors

Common errors & fixes

Module '"vite-plugin-fast-react-svg/types"' does not exist.

Missing type augmentation for SVG imports.

fix

Add `"vite-plugin-fast-react-svg/types"` to the `types` array in your tsconfig.json compilerOptions.

Cannot find module './logo.svg' or its corresponding type declarations.

TypeScript cannot resolve SVG files without type declarations.

fix

Either include type augmentation as above, or create a custom .d.ts: `declare module '*.svg' { import type { FC, SVGProps } from 'react'; const SVGComponent: FC<SVGProps<SVGSVGElement>>; export default SVGComponent; }`

Uncaught Error: Element type is invalid: expected a string or a class/function but got: undefined.

Used default import instead of named export for `svgPlugin` – results in undefined plugin.

fix

Ensure import is `import { svgPlugin } from 'vite-plugin-fast-react-svg'`.

Failed to resolve import "vite-plugin-fast-react-svg" from "vite.config.ts". Does the file exist?

Package not installed or Node version <18 (ESM-only).

fix

Run `npm install vite-plugin-fast-react-svg` and use Node 18+.

Upgrade

Version history

0.6.2latest on npm

Audit

Dependencies

reactoptionalPeer dependency: components are rendered with React; versions 18 or 19 supported.

viteoptionalPeer dependency: Vite plugin; requires ^6.3 || ^7 || ^8.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ArnaudBarre/vite-plugin-fast-react-svg ↗

packagehttps://www.npmjs.com/package/vite-plugin-fast-react-svg ↗