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/