How to use SVG sprite with Turbopack?

[VitaliyPotapov]

Summary

Hi! I have a Next.js app with ~100 icons and I’d like to bundle them into a single SVG sprite that’s loaded once and cached by the browser.

What I’m trying to achieve

• Import SVGs from anywhere in the repo.
• Build a single sprite.svg (external file), so usage is <use href="/sprite.svg#icon-id" />.
• Avoid duplicating inline SVGs in the HTML and avoid 100 network requests.

I’ve read the Turbopack docs on configuring webpack-style loaders. But I want to avoid adding SVG into JS bundle (per this tweet)

What I tried

1. SVGR – great for components, but I still want one external sprite for caching.
2. Custom loader: intercept .svg imports and return a tiny component that references the sprite:

// loader output (simplified)
export default function Icon(props) {
  return (
    <svg width="24" height="24" {...props}>
      <use href={`/sprite.svg#${id}`} />
    </svg>
  );
}

Configured via Turbopack:

// next.config.js
const path = require('path');

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [path.resolve(__dirname, 'loaders/my-sprite-loader.js')],
        as: '*.js',
      },
    },
  },
};

But I’m hitting Turbopack limitation: there’s no plugin API to emit once after all modules and no this.emitFile equivalent from a loader, so I can’t reliably write a single sprite.svg at build time.

Is there an recommended way to produce a single external SVG sprite with Turbopack?

Additional information

No response

Example

No response