Как включить файл SVG в React? - PullRequest
Новая
       39

Как включить файл SVG в React?

0 голосов
/ 20 сентября 2019

Я делаю небольшое приложение на основе React и пытаюсь добавить значок увеличительного стекла SVG.Однако React продолжает выдавать ошибку, и я не уверен, что делать дальше.Любая помощь будет оценена!

Ошибка: 

./src/Header.js
SyntaxError: /Users/klaurtar/Desktop/React JS/trillo-project/src/Header.js: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.
  13 |                     <button className="search__button">
  14 |                         <svg className="search__icon">
> 15 |                             <use xlink:href="./img/sprite.svg#icon-magnifying-glass"></use>
     |                                  ^
  16 |                         </svg>
  17 |                     </button>
  18 |                 </form>

Вот мой компонент заголовка, выдающий ошибку: 

import React, { Component } from 'react';
import logo from './img/logo.png';
import './Header.scss';

export default class Header extends Component {
    render() {
        return (
            <header className="header">
                <img src={logo} alt="logo"/>

                <form action="#" className="search">
                    <input type="text" class="search__input" placeholder="Search Hotels"/>
                    <button className="search__button">
                        <svg className="search__icon">
                            <use xlink:href="./img/sprite.svg#icon-magnifying-glass"></use>
                        </svg>
                    </button>
                </form> 
            </header>
        )
    }
}

1 Ответ

3 голосов
/ 20 сентября 2019

изменить xlink: href на xlinkHref, потому что для реакции используется camelCase

...