Import image as ReactComponent

[Darksoulsong]

Currently, I'm trying to use next-optimized-images with @svgr/webpack, but I noticed they don't play along nicely. With the latter I can import SVG images as react components and I'm wondering if this is feasible with NOI, so I can stop using one in favor of the other.

Is this possible?

[cyrilwanner]

The upcoming major version (v3, currently in the canary branch) provides an Svg component which I think is exactly what you want. However, it uses a span tag as a wrapper currently but I plan to use svgr internally within this Svg component which would resolve that issue. The change to svgr should be in one of the next canary versions.

I can't say how long it will take until v3 is published on a non-canary tag, but if you want, you can already start using it using the @canary version. It should already be stable, just a few planned features need to be done.