THIS PLUGIN IS DEPRECATED

found plugin working with default component imports https://github.com/pd4d10/vite-plugin-svgr

# vite-svg-react-loader

Vite plugin to import SVG files directly as ReactComponent

Installation

npm

1$ npm i --save-dev @andylacko/vite-svg-react-loader

yarn

1$ yarn add -D @andylacko/vite-svg-react-loader

Usage

Add svgLoader() (or whatever you decide to name your default import) to the list of plugins in the ViteJS configuration file (vite.config.js) of your project.

1import svgLoader from '@andylacko/vite-svg-react-loader'
2
3export default defineConfig({
4  //...
5  plugins: [svgLoader()],
6})

Once you have done that, you can import any of your SVG asset as a React component:

1// The default behavior of ViteJS will get you the URL of the asset
2import SVGAsset from 'assets/yourMama.svg'
3
4// That you can use normally
5function SomeComponent() {
6  return (
7    <button>
8      <SVGAsset /> Click Me!
9    </button>
10  )
11}

Typescript

If you are using this plugin in a Typescript project, adding the type definitions to your tsconfig.json will assign correct types to the imported SVG assets:

1{
2  "compilerOptions": {
3    "types": ["@andylacko/vite-svg-react-loader/svgType"]
4  }
5}

Configuration

query

If you want to import only some components as React components, and import other ones as standard string resource path, you can use the query option:

1export default defineConfig({
2  //...
3  query: 'as-react-component',
4})

In your jsx/tsx file:

1import MyReactSvg from './my_svg.svg?as-react-component'
2import MySvg from './my_svg'
3…
4
5<MyReactSvg /> // This one is treated as a react component
6<img src={MySvg} /> // This one is imported as a resource path

keepEmittedAssets

By default, the plugin will prevent transformed SVG assets to be emitted when building the production bundle (when using Vite 2.5.0 or later). If you want or need to have those files emitted anyway, pass the {keepEmittedAssets: true} option:

1export default defineConfig({
2  //...
3  plugins: [svgr({keepEmittedAssets: true})],
4})

svgrOptions

Allows to pass global svgr configuration flags. See svgr configuration documentation for more details.

1export default defineConfig({
2  //...
3  plugins: [
4    svgr({
5      svgrOptions: {
6        icon: true,
7        dimensions: false,
8        // etc...
9      },
10    }),
11  ],
12})
13
14// for quick overview
15interface SVGROptions {
16  icon?: boolean
17  dimensions?: boolean
18  expandProps?: 'start' | 'end' | false
19  svgo?: boolean
20  ref?: boolean
21  memo?: boolean
22  replaceAttrValues?: Record<string, string>
23  svgProps?: Record<string, string>
24  titleProp?: boolean
25}

Acknowledgement

This plugin started as a fork of @honkhonk/vite-plugin-svgr, but it can import svg into react component directly.

License

MIT