@achmadk/vite-plugin-svgr

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

Usage

// vite.config.js
import svgr from '@achmadk/vite-plugin-svgr'

export default {
  // ...
  plugins: [svgr()],
}

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

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

If you are using TypeScript, there is also a declaration helper for better type inference:

/// <reference types="vite-plugin-svgr/client" />

Options

svgr({
  // Set it to `true` to export React component as default.
  // Notice that it will overrides the default behavior of Vite.
  exportAsDefault: false,

  // svgr options: https://react-svgr.com/docs/options/
  svgrOptions: {
    // ...
  },

  // esbuild options, to transform jsx to js
  esbuildOptions: {
    // ...
  },

  //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include. By default all svg files will be included.
  include: '**/*.svg',

  //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
  exclude: '',
})

License

MIT