title: How to include SVG file in React?
body: <p>I am making a small React based application and I am trying to include a magnifying glass icon SVG. However React keeps throwing an error and I am not sure how to proceed. Any help would be appreciated!</p>
  
  <p>Error: </p>
  
  <pre><code>./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 |                     &lt;button className="search__button"&gt;
    14 |                         &lt;svg className="search__icon"&gt;
  &gt; 15 |                             &lt;use xlink:href="./img/sprite.svg#icon-magnifying-glass"&gt;&lt;/use&gt;
       |                                  ^
    16 |                         &lt;/svg&gt;
    17 |                     &lt;/button&gt;
    18 |                 &lt;/form&gt; 
  </code></pre>
  
  <p>Here is my Header Component throwing the error:</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './img/logo.png';
  import './Header.scss';
  
  export default class Header extends Component {
      render() {
          return (
              &lt;header className="header"&gt;
                  &lt;img src={logo} alt="logo"/&gt;
  
                  &lt;form action="#" className="search"&gt;
                      &lt;input type="text" class="search__input" placeholder="Search Hotels"/&gt;
                      &lt;button className="search__button"&gt;
                          &lt;svg className="search__icon"&gt;
                              &lt;use xlink:href="./img/sprite.svg#icon-magnifying-glass"&gt;&lt;/use&gt;
                          &lt;/svg&gt;
                      &lt;/button&gt;
                  &lt;/form&gt; 
              &lt;/header&gt;
          )
      }
  }
  </code></pre>