Type definition for vite-plugin-svgr?

Question

I have typescript error while adding props to Svg as ReactComponent- type is not assignable to type 'IntrinsicAttributes'. Plugin: vite-plugin-svgr

vite.config.ts -

svgr({
      exportAsDefault: true,
      svgrOptions: {
        icon: true,
      },
    })

Added

"types" : "vite-plugin-svgr/client" 

to ts compiler and I import svg like

import Icon from "./path"

Any suggestions?

Answer 1

For me i didn't create any custom file, you just need

1. In tsconfig.json

"compilerOptions": 
{
    [...rest...]
    "types": ["vite-plugin-svgr/client"] <--- this line
},

2. In vite.config.ts

import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});

3. In your tsx file in order to use it

import { ReactComponent as MySuperCustomIconComponent } from "../assets/logo.svg";

and simply use it

<MySuperCustomIconComponent/>

Answer 2

There is a declaration helper that you just need to append to your vite-env.d.ts file. I had compatibility issues with other solutions.

// vite-env.d.ts
// ...
/// <reference types="vite-plugin-svgr/client" />