Theo's Typesafe Cult•6mo ago

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

Gaming

Programming

How to dynamically display icons