Move assets to dedicated folders

[amanape]

seems strange to me to put components into the assets dir, no? maybe components/icons/?

Originally posted by @rbren in https://github.com/All-Hands-AI/OpenHands/pull/4535#discussion_r1815074574

Additionally, we could move the SVGs in /assets to somewhere like /public

[rbren]

Yeah if they're straight SVGs, putting that into /public makes sense. But if they're templated using React, they should probably be in components

[amanape]

We have a mix of both. Some are pure .svg's while others are components "wrapping" SVGs. We may open a separate issue for this but the main reason is that we can modify certain props like the fill if it is a component and not when it is an .svg (seems to be a Vite thing I think)

[rbren]

I think CSS can do this? Not 100% sure

[amanape]

It's something to do with the SVG plugin we use to directly import and use them in React.

It looks though there is a small effort workaround available https://stackoverflow.com/a/75232649. That way we can migrate all SVG components to pure SVGs and move them all to /public

[nafisreza]

Would like to work on this.

[amanape]

Sure, feel free to open up a PR once you're done.

One thing to note is that you cannot import assets from public with JavaScript (Vite will warn you and it won't work in production). So instead folders within src like /src/icons` should be sufficient