Importing SVG as React component not working with Next.js

Question

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: https://www.npmjs.com/package/next-images

on my next.config.js I ended up with this configuration:

module.exports = withImages({
  webpack: config => {
    return config
  },
})

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:

import { ReactComponent as IconPlus } from 'assets/icons/icon-plus.svg'

I end up with this error:

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.

I tried to add react-svg-inline as I saw in some other posts, so I ended up adding .babelrc for Next.js like this:

.babelrc

{
  "plugins": [
    "inline-react-svg"
  ]
}

After changing this I changed my svg import to just:

import IconPlus from 'assets/icons/icon-plus.svg'

and used it like

after adding .babelrc and the inline-react-svg, I get this error:

Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled (5:10):

Any help on this, Am I doing something wrong on the babel configuration, thanks :)

Nir Tamir Nir Tamir · Accepted Answer · 2020-09-26T19:22:06

Change .babelrc to be:

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

Import your .svg files relative to their location:

import IconPlus from "../assets/icons/icon-plus.svg";

You can read more about import absolute paths here.

If you just want to create React components from .svg, you don't have to use next-images.

Here is a working example https://github.com/vercel/next.js/tree/canary/examples/svg-components.

Importing SVG as React component not working with Next.js

1 Answers