dynamic icon

[suttapak]

I'm a lazy developer. When I read the documentation in the icon section, I have a question: why do we need to create a styled icon for every icon we use? Wouldn't it be better if we could wrap an icon once instead?

[suttapak]

example like these

import { icons, LucideProps } from "lucide-react-native";

import { FC } from "react";
import { iconWithClassName } from "./iconWithClassName";

export interface IconProps {
  name: keyof typeof icons;
}

const Icon: FC<IconProps & LucideProps> = ({ name, ...stuff }) => {
  const LucideIcon = icons[name];

  return <LucideIcon {...stuff} />;
};

iconWithClassName(Icon);

export default Icon;

ref: lucide