title: Importing SVG as React component not working with Next.js
body: <p>I created a project with create-react-app using Typescript and latter I was asked to add next.js to it, what happend was that it broked some svgs across the application. To fix that I added this package: <code>https://www.npmjs.com/package/next-images</code></p>
  <p>on my <strong>next.config.js</strong> I ended up with this <strong>configuration</strong>:</p>
  <pre><code>module.exports = withImages({
    webpack: config =&gt; {
      return config
    },
  })
  </code></pre>
  <p>with this configuration I can now see my images across the application, but just the public ones, if I try to add a svg like a React component following this approach:</p>
  <pre><code>import { ReactComponent as IconPlus } from 'assets/icons/icon-plus.svg'
  </code></pre>
  <p>I end up with this error:</p>
  <blockquote>
  <p>Error: Element type is invalid: expected a string (for built-in
  components) or a class/function (for composite components) but got:
  undefined. You likely forgot to export your component from the file
  it's defined in, or you might have mixed up default and named imports.</p>
  </blockquote>
  <p>I tried to add <strong>react-svg-inline</strong> as I saw in some other posts, so I ended up adding .babelrc for Next.js like this:</p>
  <p><strong>.babelrc</strong></p>
  <pre><code>{
    &quot;plugins&quot;: [
      &quot;inline-react-svg&quot;
    ]
  }
  </code></pre>
  <p>After changing this I changed my svg import to just:</p>
  <pre><code>import IconPlus from 'assets/icons/icon-plus.svg'
  </code></pre>
  <p>and used it like </p>
  <p>after adding .babelrc and the inline-react-svg, I get this error:</p>
  <blockquote>
  <p>Syntax error: Support for the experimental syntax 'jsx' isn't
  currently enabled (5:10):</p>
  </blockquote>
  <p>Any help on this, Am I doing something wrong on the babel configuration, thanks :)</p>