title: How to import SVG into Next.js component?
body: <p>I am trying to import an SVG image from file into a Next.js component.</p>
  <p>In the assets folder I have google.svg (icon):</p>
  <pre><code>&lt;svg className=&quot;svgIcon-use&quot; width=&quot;25&quot; height=&quot;37&quot; viewBox=&quot;0 0 25 25&quot;&gt;
      &lt;g fill=&quot;none&quot; fillRule=&quot;evenodd&quot;&gt;
        &lt;path
          d=&quot;M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z&quot;
          fill=&quot;#4285F4&quot;
        /&gt;
        &lt;path
          d=&quot;M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z&quot;
          fill=&quot;#34A853&quot;
        /&gt;
        &lt;path
          d=&quot;M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z&quot;
          fill=&quot;#FBBC05&quot;
        /&gt;
        &lt;path
          d=&quot;M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z&quot;
          fill=&quot;#EA4335&quot;
        /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  </code></pre>
  <p>I need to import that SVG inside of this  inside of the Next.js component:</p>
  <pre><code>import googleLogo from '../assets/google.svg';
  
  class Login extends React.Component {
    render() {
      return (
        &lt;LoginLayout title=&quot;Login Page&quot;&gt;
          &lt;div&gt;
            &lt;Link href=&quot;/auth/google&quot;&gt;
              &lt;a className=&quot;button&quot;&gt;
                &lt;div&gt;
                  &lt;span className=&quot;svgIcon t-popup-svg&quot;&gt;
                    {googleLogo}   // &lt;---- import here icon
                  &lt;/span&gt;
                  
                &lt;/div&gt;
              &lt;/a&gt;
            &lt;/Link&gt;
          &lt;/div&gt;
        &lt;/LoginLayout&gt;
      );
    }
  }
  </code></pre>
  <p>I installed this package: <a href="https://www.npmjs.com/package/next-images" rel="noreferrer">https://www.npmjs.com/package/next-images</a></p>
  <p>and set configuration based on that documentation in <code>next.config.js</code>:</p>
  <pre><code>const withCSS = require('@zeit/next-css');
  const withSass = require('@zeit/next-sass');
  const withImages = require('next-images');
  
  module.exports = withCSS(
    withSass({
      webpack: (config) =&gt; config,
      distDir: '../_next'
    }),
    withImages({
      exclude: path.resolve(__dirname, 'client/assets/svg'),
      webpack(config, options) {
        return config;
      }
    })
  );
  </code></pre>
  <p>Why my import of SVG does not work?</p>