vite-plugin-fast-react-svg

Turn SVG into React components, without Babel.

⚠️ This plugin expects svg to be cleanup by svgo with convertStyleToAttrs enable. You can also use the web version and toggle Style to attributes.

Why

While svgr is great, it uses AST transformation from Babel, which is too slow (~300ms per SVG). This plugin uses regex manipulations and dangerouslySetInnerHTML, which is almost instantaneous. It's working well for SVG optimized by svgo.

Installation

npm i -D vite-plugin-fast-react-svg

In your vite config:

import { defineConfig } from "vite";
import { svgPlugin } from "vite-plugin-fast-react-svg";

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

In tsconfig.json:

{
  compilerOptions: {
    types: ["vite-plugin-fast-react-svg/types", "vite/client"],
  },
}

Usage

import Logo from "./logo.svg";
import base64Data from "./logo.svg?inline";

const Example = () => (
  <>
    <Logo />
    <img src={base64Data} alt="Logo" />
  </>
);