Mismatch between some icons on the lucide.dev/icons site and the Reflex code

[obourdon]

I had to go into the Lucide Icons Reflex source code file to figure out what name I had to use

For instance https://lucide.dev/icons/chart-pie -> pie_chart and https://lucide.dev/icons/chart-area -> area_chart whereas https://lucide.dev/icons/book-open -> book-open

This is somewhat misleading

[Lendemor]

This is caused by us using a specific version of Lucide Icons (to avoid apps breaking all the time due to changing name, we're fixing the version at some point) However, the lucide.dev sometimes changes names, and they don't offer a view of "names" for old versions.

We'll make our own icons docs page, with all the actual names, to solve that problem.

[mohammed-anwar404]

Hey there, I would like to pick this up and work on it as my first ticket. Can I get some more details on it?

Problem: I have understood that Lucide is a website that gives icons that can be leveraged to build projects and icons are necessary in the frontend side, but as Lucid sometimes changes their icon names, the names referred to in the source code of Reflex are getting redundant and hence the icons are breaking.

Solution: To create documentation for own icons with actual names.

[picklelo]

@mohammed-anwar404 I looked a bit, I think the main issue is that our component is on version 0.359 (https://github.com/reflex-dev/reflex/blob/d77b900bd7a9b05f2d60d6f70120c1e61c08b162/reflex/components/lucide/icon.py#L8) whereas Lucide is now on 0.447 (https://www.npmjs.com/package/lucide-react)

I think we may need to bump the version, and then make sure the ICON_LIST in that file is consistent with the latest version. If there's anything that got removed, we should probably keep them for backwards compatibility.

See @Lendemor 's comment I think if we do this we need to be careful that no existing icon is removed, or be clear about it.

[itsmeadarsh2008]

This is caused by us using a specific version of Lucide Icons (to avoid apps breaking all the time due to changing name, we're fixing the version at some point) However, the lucide.dev sometimes changes names, and they don't offer a view of "names" for old versions.

We'll make our own icons docs page, with all the actual names, to solve that problem.

@Lendemor https://icon-sets.iconify.design/ https://iconify.design/docs/icon-components/ (Guide) Consider wrapping this in a single API to integrate various icon libraries. This approach also supports lucide and React, but it would be better to deprecate the classical rx.icon in favor of something like rx.iconx. This library is for development (--save-dev) and requires an additional decision on whether to install it as a development library or not. It dynamically loads icons when the webpage loads, preventing bloat and ensuring fast loading times.

[JonZeolla]

@mohammed-anwar404 is this still on your to do list? If not, I may want to take a stab at it. LMK

[mohammed-anwar404]

Hey Jon, you can look into this issue. This issue is currently not under my to-do list.

[linear[bot]]

ENG-5356 Mismatch between some icons on the lucide.dev/icons site and the Reflex code