How to use SVG as component and as url with Turbopack & SVGR?

[Kadchenko]

Summary

To use SVG as Conponent with Turbopack and @svgr/webpack we need this config

experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  }

import SomeIcon from '@/assets/icons/some-icon.svg';

<SomeIcon />

but how to use SVG as url along with Component? e.g importing with query

import Image from 'next/image';
import someIcon from '@/assets/icons/some-icon.svg?url';

<Image src={someIcon} />

Additional information

No response

Example

No response

[clement-escolano]

Hello, a similar discussion here: #65360

There is no solution yet. A workaround is here: vercel/turborepo#4832 (comment)
Basically, adding a specific suffix for "component" SVGs:

experimental: {
  turbo: {
    rules: {
      '*.inline.svg': { // only SVG finishing with .inline.svg will be exposed as components
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}