title: Can't import SVG into Next.js
body: <p>When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images?</p>
  
  <pre><code>./static/Rolling-1s-200px.svg 1:0
  Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  &gt; &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"&gt;&lt;filter id="b"&gt;&lt;feGaussianBlur stdDeviation="12" /&gt;&lt;/filter&gt;&lt;path fill="#817c70" d="M0 0h2000v2000H0z"/&gt;&lt;g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"&gt;&lt;ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/&gt;&lt;ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/&gt;&lt;ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/&gt;&lt;ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/&gt;&lt;ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/&gt;&lt;ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/&gt;&lt;path fill="#e57339" d="M271 159l-123-16 43 128z"/&gt;&lt;ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>