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

Question

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?

Does this answer your question? [Unable to import svg files in typescript](https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript) — damonholden, Nov 29 '22 at 22:31
`const svg = require("../../../icons/person.svg") as string;` Can you try this ? — DreamBold, Nov 29 '22 at 22:31
@monim Yes, but it's within the `react-scripts` package, as I'm using Create React App. — Michael Lynch, Nov 29 '22 at 22:53

score 0 · Accepted Answer · answered Nov 30 '22 at 15:23

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.

1 Answers1