vite-react-svg

A Vite plugin that transforms SVG files into React components using the DOMParser.

Performance

This plugin significantly outperforms alternatives in terms of speed and consistency. You can boost the render speed of your SVG components by up to 3 times.

Performance Benchmark (100 iterations x 5 samples):

| Plugin | Time (ms) | Std dev (ms) | Output Size (bytes) | | ---------------- | ---: | ---: | ---: | | vite-react-svg | 75.14 | ±11.21 | 833 | | vite-plugin-svgr | 222.91 | ±101.89 | 787 |

Relative Performance: vite-react-svg is 2.97x faster!

Notes

• find demo/benchmarks.ts and run these tests yourself.
• other tools like unplugin-icons require SVGR and fall into the same performance category.

Key Advantages

• 🚀 Superior Speed: Processes SVGs ~3x faster than alternatives;
• 🎯 Consistent Performance: Much lower variance in processing time (±11.21ms vs ±101.89ms);
• 🔄 Ecosystem Compatible: Uses esbuild formatter for seamless integration with other Vite plugins.

Visual Performance Comparison:

Processing Time (ms) - Lower is better
vite-react-svg  │███████ 75ms
vite-plugin-svgr│██████████████████████████ 223ms

Standard Deviation (ms) - Lower is better
vite-react-svg  │█ 11ms
vite-plugin-svgr│██████████████ 102ms

Note - the results are coming from a desktop PC with NodeJS v23.5. Your results my vary.

Features

• 🚀 Fast transformation using DOMParser
• 🎯 TypeScript support
• 🔧 Configurable transformation options
• 🔥 Hot Module Replacement (HMR) support
• ⚡ Vitest powered tests

Installation

npm install -D vite-react-svg

pnpm add -D vite-react-svg

yarn add -D vite-react-svg

deno add -D npm:vite-react-svg

bun add -D vite-react-svg

Usage

Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import reactSVG from 'vite-react-svg'

export default defineConfig({
  plugins: [
    // other plugins
    reactSVG({
        // optional
    })
  ]
})

Options

While the default options work just fine, for your convenience the plugin allows you to set them all:

interface VitePluginReactSvgOptions {
  // esbuild transform options
  esbuildOptions?: EsbuildTransformOPtions;
  // filter options
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]
}

• esbuildOptions: EsbuildTransformOptions esbuild will make sure the plugin will work seamless within the Vite ecosystem and provides some additional options;
• include: filter option to include one or more RegExp for file IDs; the default value is ["**/*.svg?react"];
• exclude: filter option to exclude one or more RegExp for file IDs.

Note - If you modify or add more include filters and you're using Typescript, you should also define new global modules.

Typescript

To add typescript support, edit your src/vite-env.d.ts (or any global types you have set in your app) as follows:

/// <reference types="vite/client" />
/// <reference types="vite-react-svg" />

In Your Code

import Icon from './icon.svg?react'

const app = () => {
  return <div>
    <Icon
      class='my-icon'
      width={24} height={24}
      style={{ fill: "currentColor" }}
    />
  </div>
}

Notes:

• All properties present in the markup of your SVG files will be used as default values;
• The viewBox and xmlns properties are somewhat required in order for the SVG to be rendered properly;
• The plugin will also resolve SVG files from the /public folder or any valid viteConfig.publicDir option.

Acknowledgments

• vite-plugin-svgr - For inspiration on the plugin architecture.
• vite-solid-svg - For a SolidJS version.

License

vite-react-svg is released under MIT License.