Interactive Icon Cloud- Colored Icons are not rendering

[Devansh-Aage]

Icons in the react-icon-cloud component are rendering in black or light gray instead of their default colors. This issue occurs even when the renderSimpleIcon function is used with the default color configuration or explicitly defined bgHex and fallbackHex values.

Steps to reproduce the behavior:

1. Use the react-icon-cloud library to render a cloud of icons.
2. Pass a valid set of icon slugs to the component.
3. Observe that the icons render in black or gray instead of their expected colors.

Expected Behaviour:
Icons should render in their default colors or the colors specified in the bgHex and fallbackHex properties.

• OS: Windows
• Browser: Chrome

`"use client";

import { useEffect, useMemo, useState } from "react";
import { useTheme } from "next-themes";
import {
Cloud,
fetchSimpleIcons,
ICloud,
renderSimpleIcon,
SimpleIcon,
} from "react-icon-cloud";

export const cloudProps: Omit<ICloud, "children"> = {
containerProps: {
style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
paddingTop: 40,
backgroundColor: "transparent",
},
},
options: {
reverse: true,
depth: 1,
wheelZoom: false,
imageScale: 2,
activeCursor: "default",
tooltip: "native",
initial: [0.1, 0.0],
clickToFront: 500,
tooltipDelay: 0,
outlineColour: "#0000",
maxSpeed: 0.07,
minSpeed: 0.04,
dragControl: false,
},
};

export const renderCustomIcon = (icon: SimpleIcon, theme: string) => {
const bgHex = theme === "light" ? "#f3f2ef" : "#080510";
const fallbackHex = theme === "light" ? "#6e6e73" : "#ffffff";
const minContrastRatio = theme === "dark" ? 2 : 1.2;

return renderSimpleIcon({
icon,
bgHex,
fallbackHex,
minContrastRatio,
size: 42,
aProps: {
href: undefined,
target: undefined,
rel: undefined,
onClick: (e: any) => e.preventDefault(),
},
});
};

export type DynamicCloudProps = {
iconSlugs: string[];
};

type IconData = Awaited<ReturnType>;

export default function IconCloud({ iconSlugs }: DynamicCloudProps) {
const [data, setData] = useState<IconData | null>(null);
const { theme } = useTheme();

useEffect(() => {
fetchSimpleIcons({ slugs: iconSlugs }).then(setData);
}, [iconSlugs]);

const renderedIcons = useMemo(() => {
if (!data) return null;

return Object.values(data.simpleIcons).map((icon) =>
  renderCustomIcon(icon, theme || "light"),
);

}, [data, theme]);

return (
// @ts-ignore
<Cloud {...cloudProps}>
<>{renderedIcons}</>

);
}
`

The issue occurs regardless of whether the theme is light or dark.
Directly applying colors to the SVG icons via style or CSS (fill and color) does not fix the problem.
This issue persists across different browsers and environments.
Library versions:
react-icon-cloud: "^4.1.4"
No errors appear in the console during rendering.

[dillionverma]

Hi!

We just released a new icon cloud component with zero dependencies! This should help address the random issues

#488

Please try installing the latest one and testing it out

https://magicui.design/docs/components/icon-cloud

Going to close issue for now. Feel free to re-open if you still face an issue.