I'm having the same issue!

@Somali did you manage to make it work?

i just put 'use client'

Normally, Next.js has built-in support for importing .svg images via its own image loader

The following code works in the latest version of Next.js (13.4.19)

import DollarSvg from './dollarcircle.svg'

...
return <Image width={50} height={50} alt="fds" src={DollarSvg} />

Don't sure if it's what you're looking for
SVGR seems can't work great with Next.js in server components for now, You may use this as an alternative

Also, have you checked your webpack configuration?

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  webpack: config => {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ['@svgr/webpack']
    })
    return config
  }
}

It's working in my side project which is using Next.js App Router

yep I did, nothing worked so eventually I implemented the first option

yes that work with Image comp, but i need inline svg to change colors, i also have same config so this is not working

Surprisingly, I have tried in the latest version and it worked
You can try it in CodeSandbox: https://codesandbox.io/p/sandbox/laughing-liskov-7df7j6