提供的 React SVG 标签名称无效答案

【问题标题】：React SVG tag name provided is not valid提供的 React SVG 标签名称无效
【发布时间】：2020-07-15 20:32:11
【问题描述】：

我正在尝试将 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;

【问题讨论】：

标签： reactjs svg create-react-app

【解决方案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;

【讨论】：

【解决方案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/

【讨论】：