if it's in public you can just reference it as you would in regular html

<img src="/googleIcon.svg">

Public assets can be accessed with just trailingSlash

/some-asset.png

You can do that but i believe what you are trying to do is make use of static import so that stuff like width and height is automatically plugged in.

I couldn't find a easy way around that. So i just put the image in the same folder to avoid the ugly path, other times i just Manually put the props myself while keeping the stuff inside public folder to make it publicly accessible

Yeah, I'm sure there are some pros and cons to having the image in the same folder, but what if I wanted to use it from the public folder, but with a cleaner path? Apologies, the formal names of these features sometimes escape me.

This works when using it inside an img element, but when it's import, the approach is different. I'm not sure why, but trying to access the public folder with just the forward slash as in your example for import won't work.