RFC: Integrate SVGR (or equivalent functionality)

[kylemh]

Edited

It's currently trivial to integrate SVGR thanks to #26281; however, we still lose out on the ability to choose to use an SVG with next-images OR SVGR. We get one or the other, but not both.

I believe Next should incorporate SVGR (or at least the ability to do a named import of an SVG and have it be a component) as either a plugin or the core webpack package. This would enable the prime SVGR feature without sacrificing the ability to use SVGs with next-image.

SVGR has long supported the ability to peacefully coexist with file-loader and url-loader usages by using named imports. So, there exists a way to integrate this without a breaking change and in keeping with standard practice (from both SVGR's "API" and Next's).

import starUrl, { ReactComponent as Star } from './star.svg'
const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)

This is how this issue was opened initially

Describe the feature you'd like to request

I would like the ability to import SVGs and use them directly as components. This is useful for iconography and complex SVG animations, because the SVG will end up as a React component somehow, someway anyways.

Describe the solution you'd like

Integrate SVGR directly into Next.js's webpack configuration and support the ability to import an SVG directly as a component and update the type definitions for '*.svg' imports.

SVGR has long supported the ability to peacefully coexist with file-loader and url-loader usages by using named imports. So, there exists a way to integrate this without a breaking change and in keeping with standard practice.

import starUrl, { ReactComponent as Star } from './star.svg'
const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)

Describe alternatives you've considered

Today, I'm able to use https://github.com/newhighsco/next-plugin-svgr (and there many other simple ways to customize the webpack configuration to leverage the tool. You're able to now, but then you won't be able to use SVGs in next/image.

[kylemh]

I'd love to contribute this myself too. Let me know if there's a reason to NOT open a PR for this.

[MaximeBernard]

"Because people can do silly stuff with your tool" should not be a reason not to provide the tool. I'm quite confused with that reasoning.

If we did not prioritize package size we'd now have about 4 to 5x larger install size.

Even though it's always nice to have a quick install, I'd rather have a nice feature than a quick install. (we're talking about 6.5MB which will take me 2~3 seconds more the first time and then it the cache)

[timneutkens]

@MaximeBernard I've never said we won't add it, I've laid out the reasoning for why it was not added yet and what issues to solve before it can be added, 2 are very clear:

• install size
• conformance around ensuring that you don't include hundreds of kbs of svgs into pages

I've even given the solution to install size: svgr ships it's own version of Babel which is not needed in the context of Next.js. Removing that shaves off 6.31MB of the install size when used in Next.js.

I'd rather have a nice feature than a quick install.

While I get you want this feature and you want it now, this is not how we approach long-term maintainability and ensuring Next.js stays fast and gets faster over time.

[kylemh]

Thoughts on plug-in with SVGO vs core without SVGO?

Judging by another thread, people can use a separate SVGO loader and it appears to work in v11+

[MaximeBernard]

Thank you for the clarification @timneutkens 👍

[kylemh]

necroing this one... is tree-shakeability the main concern or the underlying bundle... or both? i'm curious if SVGR-like functionality would be acceptable alongside use cacheing: https://paco.me/writing/svg-caching-with-use

as an aside: thinking out loud here and maybe missing bad problems... perhaps there's something that can be done 1st-class within Next.js where there's an ideal folder for .svg iconography or something

[njmh]

This is a must IMO - or some other native solution to inlining SVGs if SVGR is deemed too big. Whatever the solution is and as much as I appreciate the work they do, declaring "*.svg" in the global.d.ts as StaticImageData was far from a good choice by the Vercel team.

[kylemh]

Another important aspect that a friend made me aware of. Without internalizing SVGR, there's no way to advertise that the CRA codemod will finish migrating to Next.js if its feature set is in use.

[kylemh]

#26281 was merged into v11.0.1-canary.4 which will make most people happy. I'll update OP, but I still think integrating SVGR is a good idea. In summary, it would still be cool to take advantage of next-images for SVGs when doing a default import, and have the ability to do a component import as a named import.

[flybayer]

I 100% agree we should bake this into core!

[pcjmfranken]

The SVGR package doesn't seem very well maintained. Several issues and peer-reviewed PRs that fix problems with Webpack 5 compatibility and the 5 high severity vulnerabilities that NPM currently reports with SVGR seem to be ignored by the maintainers.

Another thing to take into consideration would be how to go about custom configuration. It's very common to have a separate config targeting *.icon.svg files that optimises them for use as (wait for it.. 😁) icons (this could be implemented as a default or flag).

The core concept would be a very welcome addition to Next.js, though. I think it also fits perfectly with its No config needed. mission.

[gregberge]

Sorry I got a kid, and no donation to work on my paid hours.

[pcjmfranken]

Hey @gregberge, that wasn't in any way meant to blame or otherwise accuse you of anything. I'm truly terribly sorry if you picked it up that way!

[gregberge]

No problem! The project is now well maintained, I managed to got time to do it!

[jserrao]

If SVGR doesn't get integrated into Next, what is the recommended way to handle favicons? Do we somehow run that through next/image as well?

[kylemh]

Favicons specifically are a different thing, no? Does SVGR somehow convert svg files to ico files? You can handle favicons with static file serving.

[jserrao]

I like to use SVG favicons but maybe that's just not possible

[kylemh]

Well, then you could integrate SVGR yourself and use SVG favicons. Keep in mind SVG favicons are still not universally supported.

[jserrao]

It's kind of funny, Apple dictates like 800 favicons for every project but hasn't prioritized supporting SVG favicons in Safari.

My larger point is that you can't use next/image with SVG, PNG, etc for favicons. They require a direct SVG/PNG import that isn't possible right now - try it out, you'll see what I mean.

Next is doing some voodoo under the hood that lets you place a favicon.ico in the /public folder and, without importing, it just works with their custom builder in 12.x+. But, as you point out, there are a lot of legacy favicon formats and no good way to use them with the new build tool. Seems crazy to put loaders into the mix just to support favicons, no?

[alebelcor]

@jserrao Follow this and you should be fine.

No need to use next/image.