console.log(Dropdown) and see what is the type

Object
blurHeight
:
0
blurWidth
:
0
height
:
18
src
:
"/_next/static/media/Dropdown.96d3c204.svg"
width
:
30
[[Prototype]]
:
Object

Generally, Next.js already has its own loader for SVG files, we will use <Image src={Dropdown} /> or <Image src="/dropdown.svg" /> directly.
If you want to include it in the DOM tree without a <img>, just put it in a component and convert it to JSX.

I'm not familiar with Webpack, but seems like you have to override the one Next.js provided.

Basically the whole idea came from changing the svg color on hover. I searched for it and a few websites showed this method (svgr/webpack) but it does not work for me. I saw this video as well and follow throughth it https://www.youtube.com/watch?v=AHfusPsq0WY&t=281s&ab_channel=Joshtriedcoding if you can help me with the <Image/> way to change the color it would be the best option for me. also Thanks for your response. I really appreciate.

If you want to change the color of SVG images, no, it must be an SVG element inside of the DOM tree (Not <Image />).

We can use currentColor as a color, it refers to the color in your CSS properties:

function MyCoolIcon() {
  return <svg width="50" height="50"> 
    <g>
      <path stroke="currentColor" ... />
    </g>
  </svg>
}

Notice that you can have className or style prop passed into the element

okey then I will make a component for svgs. But if anyone knows about svgr/webpack and also could help me with my problem that would be very nice.

thank you Fuma for the help!