Type 'typeof import("*.svg")' is not assignable to type 'string'. ts(2-CodePudding

The below line is throwing the above error in tsx file

import MySvgImg from "images/mySvgImage.svg";

<img src={MySvgImg} alt="This line throws error" />

I handled the SVG imports in the global.d.ts

declare module "*.svg" {
  const ReactComponent: any;
  export const ReactComponent;
}

I also included global.d.ts in my tsconfig.json

 "include": ["src/**/*", "global.d.ts"],

CodePudding user response：

You can import SVG as a component.

import { ReactComponent as MySvgImg } from "images/mySvgImage.svg";

With this import, you can use the SVG icon as a normal React component

      <MySvgImg />

You might need to change the global.d.ts if you get a new error saying there is no named import.

declare module "*.svg" {
  const ReactComponent: any;
  export { ReactComponent };
}