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) 文档中所述

以您想要的方式渲染它：

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;

Answer 2

您需要使用以下语法导入组件：

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

使用花括号和ReactComponent是必要的——它们告诉 React 你想用 SVG 构建一个组件。

我发现这个只是因为 Dan Abramov 对 create-react-app 问题的回复。 他在评论中发布的链接不再有效，但文档中仍然提到它。

https://github.com/facebook/create-react-app/issues/5293

https://create-react-app.dev/docs/adding-images-fonts-and-files/