Issue

I was trying to import SVG as ReactComponent in one .tsx File of React App.

Error

Cannot find module '../icons/download.svg' or its corresponding type declarations.

Ways Tried

I got some of the ways to resolve it, and I tried them

1. using svg.d.ts in src/ with given config

   declare module "*.svg" {
    import React from "react";
   
    export const ReactComponent: React.FunctionComponent<
        React.SVGProps<SVGSVGElement> & { title?: string }
    >;
   
    const src: string;
    export default src;
    }
   

and

declare module "*.svg" {
    import React from "react";
    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
    export default content;
}

one by one, and added it to ts.config file

"include": ["./src/components", "src/svg.d.ts"]

but none of them worked

2. created ./src/@types/assets/index.d.ts file with config

    declare module "*.svg" {
        import React = require("react");
        export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
        const src: string;
        export default src;
    }

    declare module "*.jpg" {
        const content: string;
        export default content;
    }
    
    declare module "*.png" {
        const content: string;
        export default content;
    }
    
    declare module "*.json" {
        const content: string;
        export default content;
    }

and added it to ts.config

"typeRoots": [
    "./src/@types",
    "./node_modules/@types"
] 

this also didn't worked.

Please suggest what am I doing wrong or some other way of doing this.