@arco-plugins/vite-plugin-svgr

vite-plugin-svgr

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

Usage

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

export default {
  // ...
  plugins: [
    svgrPlugin({
      svgrOptions: {
        icon: true,
        // ...svgr options (https://react-svgr.com/docs/options/)
      },
    }),
  ],
}

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

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

If you are using TypeScript, vite-plugin-svgr/client can be added to tsconfig.json:

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

License

MIT