vite-plugin-fast-react-svg

0.6.2 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Missing type augmentation for SVG imports.

fix

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

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

cause 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; }

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

cause 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'.

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

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

fix

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

Warnings

breaking Default 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'`.

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.

breaking ESM-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+.

breaking Peer 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.

gotcha SVG 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.

gotcha TypeScript users must add type augmentation; otherwise TS will error on SVG imports. ↓

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

deprecated Options 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.

Install

npm install vite-plugin-fast-react-svg

yarn add vite-plugin-fast-react-svg

pnpm add vite-plugin-fast-react-svg

Imports

svgPlugin

wrong

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

correct

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

wrong

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

correct

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

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

Quickstart

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} />;
}