Module '"*.svg"' has no exported member 'ReactComponent'

Question

I created a new React app using CRA. Now, I want to create an index file that exports all of my icons. In order to do so, I stored all of my icons in my src/icons folder and created an index file that exports my icons as React elements.

The problem is, that I get the following error when trying to export ReactComponent:

Module '"*.svg"' has no exported member 'ReactComponent'. Did you mean to use 'import ReactComponent from "*.svg"' instead?

According to CRA's docs, this should work without the need of declaring a new module.

I'm using the react@^16.13.1 and [email protected] which supposed to support it.

The weird thing is, that when I run the code, I get neither compilation nor run-time errors. When I use <ChevronRightIcon /> then the icon is displayed accordingly.

Answer 1

Add a file anywhere in your project like this, svg.d.ts

with content

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

Restart the typescript server within VSCode, If the file didn't get picked up then in your tsconfig.json explicitly say:

 "include": 
  [...,
    "svg.d.ts"

  ],