How do I import an SVG into a component using Create React App and TypeScript?-CodePudding

I have a React project written in JS that I am converting to TS. Using JS, this works:

import { ReactComponent as IconPerson } from '../../../icons/person.svg';

Using TS, I get this error:

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

I have added the following to a new index.d.ts file:

declare module '*.svg';

I have also added the index.d.ts file to the include array in my tsconfig.json:

{
  include: ["src", "**/*.ts", "**/*.tsx", "index.d.ts"]
}

What am I missing?

CodePudding user response：

change index.d.ts :

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

CodePudding user response：

This works for me:

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

It seems strange to me creating a ReactComponent variable, but I no longer get any TS errors.