Request for Optimized Icon Registration Solution

Hi Plasmic Developer Support Team,

We are currently using your platform to register Lucide icons in our project and have implemented a batch registration process to avoid memory overload and manage async function calls efficiently. However, we would like to explore whether there’s a more optimized way to register a large number (thousands) of Lucide icons without facing potential memory crashes.

Currently, our registration flow involves:

  • Batching the icon registration in sets (e.g., 5000 icons per batch).
  • Introducing a delay between batches to prevent overloading the memory.

Here’s the core snippet of our implementation for registering the icons asynchronously:

private async registerIconComponents(batchSize: number = 5000) {
  const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
  const batches = this.chunkArray(this.iconNames, batchSize);

  for (let i = 0; i < batches.length; i++) {
    const batch = batches[i];
    await Promise.all(batch.map((iconName) => this.registerSingleIcon(iconName)));
    await delay(100); // Adding a delay between batches to manage memory usage
  }
}

While this approach works, we are concerned that loading thousands of icons can still potentially lead to memory crashes or performance bottlenecks.

Questions:

  1. Is there a more efficient method or best practice for registering a large number of icons in bulk with Plasmic, to reduce memory usage and avoid overloading the system?
  2. Would you recommend a different batching size or method to improve efficiency in handling large sets of icons?
  3. Are there any caching mechanisms or other optimizations within Plasmic that we could leverage to improve this process?

We would greatly appreciate any insights or recommendations you could provide for improving this icon registration process.

Thank you for your support!

hmmm, I feel like there has to be a way since the self-hosted version comes with a project that has just the lucide icons

1 Like

Oh, its actually Tabler Icons

1 Like

The registration process is currently all in memory. Trying to do it async is not going to help in this case.

What were the memory issues you were running into trying to import 5000 icons?

1 Like

It looks like I’m running into a rate limiting issue. The error message I’m receiving indicates that some users or devices are exceeding the request limit set by Amplitude (specifically, 15 requests per second). This is resulting in a 429 Too Many Requests error. Amplitude is throttling further requests from those users, which is causing the capture calls to be ignored.

Any suggestions on how to handle this better within Plasmic?

Thanks!

Amplitude is for our own product analytics, so we know what to improve in Plasmic. It returning 429 shouldn’t affect any functionality.

@fmota cc: @jason I hope you don’t mind me reaching out but we would like to register our icons and are looking for a lightweight way to register our icons.

  1. We could do all the 5000 icons manually but that would take time. We could do it incrementally
  2. We are batch registering them and I think that it is too heavy on the system and might be slowing our loading speeds. Correctly if I am wrong but do code components get registered every plasmic is loaded?

Is there a different way you would suggest?

I am grateful for your help in advance!

  1. We don’t have a dedicated way to do this automatically. Manually, incrementally adding them to the project might be better.
  2. Registered tokens/components only affect Studio performance. In production, they do not get “loaded”–instead, references to them directly use/import your code, so there should be no performance impact…

@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.

I’m grateful @jason and @muhammad_asim! :blush:

  1. @jason noted.
  2. @muhammad_asim Thank you for the video! We are using loader to register the icons. Would you suggest using using Codegen?

@aihe_team You can register the same component in Loader mode as well.