Property 'className' does not exist on type 'IntrinsicAttributes'

[hellhorse123]

In my React TS project with vite and "vite-plugin-svgr": "^4.2.0" I start getting error:

Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'className' does not exist on type 'IntrinsicAttributes'.ts(2322) (property) className: string

when I trying to add className to svg:

import Link from "@/assets/icons/link.svg";
...
<Link className="goal-card__link_svg" />

My vite.config.ts :

  plugins: [
    react(),
    svgr({
      include: "**/*.svg",
    }),
    ...

[xinzhang]

Yeah also if I want to do style={{}} or width={} height={}, will not work is there a way to fix this?

[pd4d10]

You need to tweak this type definition file to keep consistent with the include option. For example, change this line

https://github.com/pd4d10/vite-plugin-svgr/blob/1280569bbaccc2fb7be43ba70f2b384f6cabba93/client.d.ts#L4

to declare module "*.svg".

But I'm not sure if it would confilict with the Vite build-in types.

[gusazevedo]

Any updates on this issue? I'm facing the same problem

[cheshirrrcat]

Creating global.d.ts file and placing it in src folder helped me with resolve this issue

declare module "*.svg" {
  import type * as React from "react";
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

[hellhorse123]

Creating global.d.ts file and placing it in src folder helped me with resolve this issue

declare module "*.svg" {
  import type * as React from "react";
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

Yes, this way helps me

[jwalkerinterpres]

That way worked for me too, but the key thing was that I had to put it before the line:

 /// <reference types="vite/client" />

If I put it after that declaration, it didn't work.