[next-image-loader] "TypeError: Invalid SVG" when importing SVG sprites

[gdorsi]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

v14.15.1

What browser are you using?

What operating system are you using?

macOS

How are you deploying your application?

Other platform

Describe the Bug

When a svg sprite (like this one) is imported "TypeError: Invalid SVG" is thrown on build.

Expected Behavior

The import should return the StaticImageData with an empty placeholder without throwing an error.

To Reproduce

1. Start a new next project
2. Download this image
3. Import the svg in a javascript module (import logo from "./logo-header.svg")
4. Run the build with next build

[Shmoji]

I'm also having issues with importing SVGs. I use babel-plugin-inline-react-svg to load SVGs, but it is no longer allowing the imported SVGs to be used as components in templates after the Next 11 update

[jonathandsouza]

I think I am having a similar problem with next-optimized-images. The error says

[janhuenermann]

I also have this issue with @svgr/webpack. I got around it by making each SVG file its own React component, i.e.

export const MySVG = ({ ...otherProps }) => (
  <svg {...otherProps}>
  ...
  </svg>
)

Of course, this is not a scalable solution. It would be nice to have proper support for @svgr/webpack or babel-plugin-inline-react-svg.

[styfle]

Thanks for reporting this issue!

I'm going to close and merge with the similar issue #26130.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.