Most of the Frontend Compile Time is Occupied by rx.icon

[ruhz3]

I am using rx.icon to conditionally render icons in components, as shown below:

def dynamic_icon(icon_name: str, **props) -> rx.Component:
    return rx.match(
        icon_name,
        ("wand", rx.icon("wand", **props)),
        ("wand-sparkles", rx.icon("wand-sparkles", **props)),
        ("search", rx.icon("search", **props)),
        ("message-circle-question", rx.icon("message-circle-question", **props)),
        ("paperclip", rx.icon("paperclip", **props)),
        ...
    )

However, as the number of icons increased, the frontend compilation time started exceeding 2 minutes. To mitigate this during development, I switched to using the default value in rx.match as shown below:

def dynamic_icon(icon_name: str, **props) -> rx.Component:
    return rx.match(
        icon_name,
        # ("wand", rx.icon("wand", **props)),
        # ("wand-sparkles", rx.icon("wand-sparkles", **props)),
        # ("search", rx.icon("search", **props)),
        # ("message-circle-question", rx.icon("message-circle-question", **props)),
        # ("paperclip", rx.icon("paperclip", **props)),
        ...
        rx.icon("paperclip", **props)
    )

With this change, the compilation time was reduced to about 10 seconds.

Is there a better approach to handle this efficiently?

[linear]

ENG-4359 Most of the Frontend Compile Time is Occupied by `rx.icon`

[Lendemor]

We've recently merged this PR : #4636 which used the newly define DynamicIcon from Lucide.
If you have a lot of icons, you might be able to substitute the rx.matchs with a variable tag.

Caveat is that actual live performance might be worse while in prod mode.

[ruhz3]

@Lendemor
I really like the new feature. In that case, which is better in terms of performance: using "rx.match" as we currently do, or the new "dynamic icon" feature?

Currently, due to compile speed, we unify all project icons into one during development and only switch to individual icons when a build is required (as mentioned in the issue details).

Does the dynamic icon feature address this issue?

[Lendemor]

According to lucide docs, DynamicIcon usage should be preferred mostly when you want to accept any/ large amount of different icons, like if the tag was stored in DB or such.

Regarding compilation performance for dev, I would recommend setting up a whitelist system like we did in reflex-web.
This allow us to only compile the page(s) we are working on now in reflex run, but still compile all of them when doing export/deploy.