title: Importing SVG in NextJS
body: <p>I am trying to import an svg within a NextJS project, everytime I get this error </p>
  
  <pre><code>./assets/aboutimg.svg 1:0
  Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  &gt; &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="1028" viewBox="0 0 578 1028"&gt;
  |   &lt;image id="_64538565_2370063099695596_8091233071539421184_n" data-name="64538565_2370063099695596_8091233071539421184_n" width="578" height="1028" xlink:href="
  </code></pre>
  
  <p>I have tried using next-images and also svgr. I will paste my About.js code below, it would be excellent if someone could let me know what I have been doing wrong.</p>
  
  <pre><code>import LayoutNoLogo from '../comps/LayoutNoLogo'
  import AboutImg from '../assets/aboutimg.svg'
  
  const About = () =&gt; {
      return (
          &lt;LayoutNoLogo&gt;
              &lt;div className="row"&gt;
                  &lt;div className="column-1"&gt;
                      &lt;img src={AboutImg} /&gt;
                  &lt;/div&gt;
                  &lt;div className="column-2"&gt;
                      &lt;h1&gt;About&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;style jsx&gt;{`
  
          `}&lt;/style&gt;
  
          &lt;/LayoutNoLogo&gt;
      )
  }
  
  export default About;
  </code></pre>