如何在 React 中包含 SVG 文件？答案

【问题标题】：How to include SVG file in React?如何在 React 中包含 SVG 文件？
【发布时间】：2020-01-21 03:53:51
【问题描述】：

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

【问题讨论】：

处理这个问题的最佳方法是创建一个单独的 .svg 文件并将其作为组件导入：import { ReactComponent as MySvg } from 'pathToMySvg' 并将其用作常规组件 <MySvg />

标签： javascript css reactjs svg sass

【解决方案1】：

将 xlink:href 更改为 xlinkHref 因为 react 使用 camelCase

【讨论】：