reactjs - 提供的 React SVG 标签名称无效

Question

我正在尝试将 SVG 添加到 React 应用程序(使用 create-react-app 构建)。当我尝试将其添加为组件时，出现如下错误:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
我错过了什么？

代码:

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

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

export default Header;

Answer 1

您可以通过以下方式导入它:
import { ReactComponent as Logo } from '../img/logo.svg';
如 CRA (create-react-app) 中所述 documentation

以您想要的方式渲染它:

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

而且，如果不需要将其渲染为组件，您可以通过这种方式将 svg 渲染为图像:

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

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

export default Header;