How to use resourceQuery loader options with turbopack?

[clement-escolano]

Summary

We recently migrated a big project to the latest version of Next and wanted to try out turbopack. The project loads faster with it so it feels good on this front. However, there is still one issue that blocks us from migrating completely to turbopack. We have special configuration for @svgr/webpack: almost all of our svg images are icons so we use the icon: true option with @svgr/webpack. However, some of our SVG files are actual images and we need to use these files as standard images.

With webpack, this configuration is done with:

Webpack configuration

webpack: (config) => {
  // use default url loader when importing SVG with "*.svg?url"
  config.module.rules.push({
      test: /\.svg$/i,
      type: "asset",
      resourceQuery: /url/,
  });

  config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.tsx?$/,
      resourceQuery: { not: [/url/] }, // only if not *.svg?url
      use: [
          {
              loader: "@svgr/webpack",
              options: {
                  icon: true,
                  svgProps: { role: "img", "aria-label": "" },
              },
          },
      ],
  });

  return config;
},

I did not find a way of doing it with turbo. This is the configuration I have for my icons but I can't add the ?url special case so my standard SVG images won't work:

Turbo configuration

turbo: {
    rules: {
        "*.svg": {
            loaders: [
                {
                    loader: "@svgr/webpack",
                    options: {
                        icon: true,
                        svgProps: { role: "img", "aria-label": "" },
                    },
                },
            ],
            as: "*.js",
        },
    },
},

Do you know if this is currently feasible with turbopack?

Thank you

Additional information

No response

Example

No response

[RafaelFerreiraTVD]

@clement-escolano have you managed to find a solution for your issue? I need to achieve the same and I'm kinda blocked as well.

[RafaelFerreiraTVD]

You now have access to the resourceQuery param and it was fixed here: #69703

[RafaelFerreiraTVD]

You can then try to either return 1 or another

[alex-statsig]

Is there any good way to conditionally use the default svg loader with this? My goal is to recreate the default svgr setup for nextjs which skips the svgr loader if the "?url" resourceQuery is specified, so that you can easily import an "svg" as a react component (ex. for icons) or an asset (ex. for larger "images"). I tried this custom loader:

const plugin = require('@svgr/webpack');
const nextImagePlugin = require('next/dist/build/webpack/loaders/next-image-loader');

module.exports = function (source) {
  if (this.resourceQuery === '?url') {
    return nextImagePlugin.default.call(this, source);
  }
  return plugin.call(this, source);
};

but it seems like "next-image-loader" isn't really the default svg loader used with turbopack (instead its a native rust loader afaict).

Noticed similar discussion about this gap elsewhere, but the workaround isn't ideal

[vitalets]

Next.js 16 shipped Turbopack condition rules, which allow loaders to be applied conditionally.

For example, you can use the path condition to apply SVGR only to the icons folder while keeping the default loader for all other SVGs:

turbopack: {
  rules: {
    "*.svg": {
      loaders: ["@svgr/webpack"],
      condition: {
        path: "icons/**"
      },
      as: "*.js",
    },
  },
},

The only challenge is typings: TypeScript is not aware of Turbopack rules, so an imported .svg file might be treated either as a React component or as a static image { src, width, height }.

In my projects, I replaced SVGR with inlining icons as data URIs. It’s more performant and also solves the typing issue. Imported icons always have the same shape as external images:

{
  src: "data:image/svg+xml,...",
  width: 32,
  height: 32
}

Here is a detailed description.

[emmgfx]

@vitalets but with this solution we can't modify the color icon with css, right?

[vitalets]

@emmgfx For mono-color icons, I found a way to do it with CSS masking. For more fine-grained access to SVG internals, yes: SVGR or manually inlining that specific icon to get full control over its nodes.

[clement-escolano]

Thank you @vitalets This is not perfect but is the closest solution we can get right now

[Umuts-Codes]

Hi,

Currently, Turbopack does not fully support all the loader-specific query options available in Webpack, including the ?url resource query for @svgr/webpack. This means that differentiating between SVG icons (with icon: true) and standard SVG images during the build is not directly supported out of the box.

Recommended approaches:

1. Separate Import Paths

   • Keep SVG icons and standard SVG images in different folders.
   • Configure Turbopack or the Next.js project to handle each folder differently. For example, you can import standard SVGs using a dedicated wrapper that treats them as URLs, while importing icons using @svgr/webpack.

2. Custom Wrapper Components

   • For standard images, create a small wrapper component that appends the ?url logic or uses next/image.
   • For icons, continue using the SVGR transformation.

3. Fallback to Webpack for Complex Cases

   • If your project relies heavily on ?url queries for SVGs, it may be necessary to temporarily continue using Webpack for these assets until Turbopack fully supports loader query options.

• Summary -

• Turbopack currently lacks the Webpack-style resource query flexibility.
• The most reliable workaround is to separate SVGs by type and handle them explicitly in imports or with wrapper components.
• Monitor Next.js and Turbopack releases for future updates, as loader query support may improve in upcoming versions.

This approach ensures a clear separation between icons and image SVGs while maintaining compatibility with Turbopack’s current capabilities.