Request for Optimized Icon Registration Solution

Developer Support
10

@aihe_team As one of the alternatively solutions, instead of registering individual icons, you can register a single custom icon component that will load the icon dynamically as follows

import * as LucideReactIcons from "lucide-react";

export function LucideIcon({
  iconName,
  className,
}: {
  iconName: string;
  className?: string;
}) {
  // @ts-expect-error - dynamically loading icon
  const Icon = LucideReactIcons[iconName];
  return <Icon className={className} />;
}

and then register it as follows:

registerComponent(LucideIcon, {
  name: "LucideIcon",
  importPath: "@/components/code-components/LucideIcon",
  props: {
    iconName: {
      type: "string",
      defaultValue: "Home",
    },
  },
  defaultStyles: {
    width: "24px",
    height: "24px",
  },
});

Note that the importPath will differ as per your component location in your codebase. The above example registerComponent is for Codegen mode.