Answer a question

I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.

What am I missing?

Code:

import React from 'react';
import Logo from '../img/logo.svg';

const Header = () => {
    return (
        <div>
            <Logo />
        </div>
    )
}

export default Header;

Answers

You can import it this way:

import { ReactComponent as Logo } from '../img/logo.svg';

as said in CRA (create-react-app) documentation

an render it the way you want:

import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
    return (
        <div>
            <Logo />
        </div>
    )
}

And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:

import React from 'react';
import logo from '../img/logo.svg';

const Header = () => {
    return (
        <div>
            <img src={logo} alt="logo"/>
        </div>
    )
}

export default Header;