title: Cannot import SVG file into react
body: <p>I have some icons that lays in svg file that i need to use in my React application the problem is that all it says when i try to import it is "Cannot find module".</p>
  
  <p>the class looks like this</p>
  
  <pre><code>import * as React from "react";
  import "./LeaderboardBar.scss";
  import Trophy from './icon_tournament.svg'
  
  export interface Props
  {
      display: boolean
  }
  
  export interface State
  {
  
  }
  
  export class LeaderboardBar extends React.Component&lt;Props, State&gt;
  {
      render()
      {
          return (
              &lt;div id="leaderboard-bar"&gt;
              &lt;div&gt;
                  &lt;p id="leaderboard-bar-text"&gt;Raging Rex Tournament&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="rank-text"&gt;
                  &lt;p id="leaderboard-bar-text"&gt;Your Rank  &lt;span id="gold-text"&gt;77/542&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="score-text"&gt;
                  &lt;p id="leaderboard-bar-text"&gt;Score &lt;span id="gold-text"&gt;54&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="terms-text"&gt;
                  &lt;p id="leaderboard-bar-text"&gt;Terms &amp; Info&lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>i have <a href="https://www.npmjs.com/package/@svgr/webpack" rel="nofollow noreferrer">https://www.npmjs.com/package/@svgr/webpack</a> installed but the problems stays the same. What is the best practice in importing svg into React?</p>