[bug]: /docs/components/icon-cloud

[christiangheno]

After resolving the issues related to the missing colors in the icon cloud, the icons now display with colors as expected. However, there are several new issues:
1. Some of the icons appear blurry.
2. Certain icons do not display correctly in light and dark modes.
3. A few icons are cropped inside a small circle, affecting their visibility and appearance.

These problems need to be addressed to ensure the icons are clear, responsive to the light/dark mode, and properly displayed without being cut off.

[h3rmel]

Hi @christiangheno, can you show us a picture of this happening, please?

[christiangheno]

Hi @h3rmel After resolving the issues related to the missing colors in the icon cloud, I found that the color problem was caused by the update of the react-icon-cloud package. I fixed it by updating the package properly. The issue with icons not being visible in dark mode and some being clipped into a circular shape can be observed in the preview of the Icon Cloud component on the Magic UI screen.

[christiangheno]

[h3rmel]

Hi @christiangheno, I checked here in the icon-cloud.tsx code and seems to be this part of the code that creates this circular shape:

// Create circular clipping path
offCtx.beginPath();
offCtx.arc(20, 20, 20, 0, Math.PI * 2);
offCtx.closePath();
offCtx.clip();

Commenting out this part of the code, the circular shape will be removed:

[h3rmel]

For the issue with icons not being visible in dark mode, you can try to control the color of the icons like Next.js, GitHub and other that are dark palette to be light palette when dark mode is on.