how can i import svg in typescript react-CodePudding

In typescript(*.tsx) files I cannot import svg file with this statement:

import image from './image.svg';

Transpiler says:[ts] cannot find module './logo.svg'. My svg file is just <svg>...</svg>

CodePudding user response：

If you use webpack, you can do this by creating a custom types file.

Create a file named custom.d.ts with the following content:

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

Add the custom.d.ts to tsconfig.json as below

CodePudding user response：

SVG imports are not supported, it needs webpack configuration

You can to transform your SVG file to react component

image.tsx

export default SVGImage(){
   
   return <svg>...</svg>
}

then you can import it as React component

import SVGImage from './image';

...
return <SVGImage /> 
...