Указано неверное имя тега SVG - PullRequest
Новая
       21

Указано неверное имя тега SVG

0 голосов
/ 03 апреля 2020

Я пытаюсь добавить SVG в приложение React (созданное с помощью create-реагировать-приложение). Когда я пытаюсь добавить его в качестве компонента, я получаю сообщение об ошибке:

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;

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Вы можете импортировать его следующим образом:

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

, как сказано в CRA (create-Reaction-app) документация

an отрендерите его так, как вы хотите: 

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;
0 голосов
/ 03 апреля 2020

Вам необходимо импортировать компонент, используя этот синтаксис:

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

Использование фигурных скобок и ReactComponent необходимо - они говорят React, что вы хотите построить компонент с SVG.

Я нашел это только из-за ответа Дана Абрамова на вопрос создания приложения. Ссылка, которую он разместил в своем комментарии, больше не работает, но она все еще упоминается в документации.

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

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

...