vite-plugin-svgr-default-export-option

Published as separate package until we can get an a defaultExport option implemented as shown in https://github.com/pd4d10/vite-plugin-svgr/pull/13

Vite plugin to transform SVGs into React components. Uses svgr under the hood.

Usage

// vite.config.js
import svgrPlugin from 'vite-plugin-svgr'

export default {
  // ...
  plugins: [
    svgrPlugin({
      svgr: {/* SVGR config */},
      svgrState: {/* SVGR state */},
      esbuild: {/* esbuild config */},
      defaultExport: false, // uses export default when true. See typescript section below
    })
  ],
}

Then SVG files can be imported as React components, just like create-react-app does:

import { ReactComponent as Logo } from './logo.svg'

TypeScript

Add vite-plugin-svgr/client (or vite-plugin/client-default if using options.defaultExport) to compilerOptions.types in tsconfig.json:

{
  // ...
  "compilerOptions": {
    // ...
    "types": ["vite-plugin-svgr/client"]
  }
}

License

MIT