javascript - 如何在 React 中包含 SVG 文件？

Question

我正在制作一个基于 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> 

这是我的 header 组件抛出的错误:

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>
        )
    }
}

Answer 1

将 xlink:href 更改为 xlinkHref 因为 react 使用驼峰式命名