How to dynamically display icons

So in my app i want to dynamically display icons from a string[] but it doesn't seem to want to work, the icons show in the html but are transparent on the page. the icon component:
import { IconBaseProps } from "react-icons";
import * as MDI from "react-icons/md";

export interface IconProps extends IconBaseProps {
name: keyof typeof MDI;
color?: React.CSSProperties["color"] | string;
size?: number;
}

const Icon = ({
name = "MdLocationOn",
color = "#000",
size = 24,
...props
}: IconProps) => {
const DisplayIcon = MDI[name];

return (
<DisplayIcon
size={size}
style={{ fill: color, color: "inherit" }}
{...props}
/>
);
};

export default Icon;
import { IconBaseProps } from "react-icons";
import * as MDI from "react-icons/md";

export interface IconProps extends IconBaseProps {
name: keyof typeof MDI;
color?: React.CSSProperties["color"] | string;
size?: number;
}

const Icon = ({
name = "MdLocationOn",
color = "#000",
size = 24,
...props
}: IconProps) => {
const DisplayIcon = MDI[name];

return (
<DisplayIcon
size={size}
style={{ fill: color, color: "inherit" }}
{...props}
/>
);
};

export default Icon;
then this is my component rendering the icons:
const iconsList: IconProps["name"][] = [
"MdOutlineFolder",
"MdOutlineLocationOn",
"MdOutlineHiking",
"MdOutlineBed",
"MdOutlineDirections",
];

//...
{iconsList.map((icon, index) => {
return (
<Button
onClick={() => setValue("icon", icon)}
key={index}
className={cn("group h-8 w-8 text-black", {
"scale-105 border border-gray-500 shadow-lg": watch("icon") == icon,
})}
type="button"
variant="ghost"
>
<Icon name={icon} size={24} />
</Button>
);
})}
const iconsList: IconProps["name"][] = [
"MdOutlineFolder",
"MdOutlineLocationOn",
"MdOutlineHiking",
"MdOutlineBed",
"MdOutlineDirections",
];

//...
{iconsList.map((icon, index) => {
return (
<Button
onClick={() => setValue("icon", icon)}
key={index}
className={cn("group h-8 w-8 text-black", {
"scale-105 border border-gray-500 shadow-lg": watch("icon") == icon,
})}
type="button"
variant="ghost"
>
<Icon name={icon} size={24} />
</Button>
);
})}
Is this something i am missing?
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server