TypeScript SVG import as a React Component - Element type is invalid: expected a string (for built-in components) or a class/function

Viewed 825

I'm trying to import a svg as a react component. I have installed svgr. Also I have added svg type definitions:

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

The above is also included in my tsconfig.json

When I try to import a svg like:

import { ReactComponent as Logo }  from "logo.svg";

// inside render
return <Logo/>

It throws:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

Any help is much appreciated!

1 Answers

If you want to use .svg. You just use like this.

import Logo from "logo.svg";

// inside render

<img src={Logo} />
Related