Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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 };
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading