Iconify move to JSON

[mjblacker]

I've been using this Iconify package along with the Lucide icons (thanks, awesome work).

I realised some icons were missing or had been renamed and it appears that the icon packs under @iconify-icons/ are no longer maintained and the data is now in @iconify-json/

I had a quick look but trying to work out what changed and how it all fits together. It appears that the current version imports the JS/TS file and then that is exported/bundled by Vite.

Maybe the generator could create IconifyIcon from the json data and that would be the specific icon set instead of importing them. It could also remove the npm dependency as the FS library would include the data if I'm understanding how this work correctly.

Might be a significant change here and happy to help where possible.

[MangelMaxime]

Always a pleasure when a library makes big breaking changes 😅

Looking at their documentation, I think the easiest way would be to use @iconify/tools with their existing IconSet. But more exploration is needed, but I don't find their documentation real clear on how they expects people to use the library.

It seems like they expects people to generate the SVG themself sometimes.

[mjblacker]

Always a pleasure when a library makes big breaking changes 😅

Looking at their documentation, I think the easiest way would be to use @iconify/tools with their existing IconSet. But more exploration is needed, but I don't find their documentation real clear on how they expects people to use the library.

It seems like they expects people to generate the SVG themself sometimes.

Haha if even you're having trouble with their docs, I don't feel so bad now.

I think I worked out a solution which is actually easier but having some typed icon names would still be beneficial.

Solution: I'm using Vite to build so I've followed the instructions to use the @iconify/tailwind plugin and added the addIconSelectors to my plugin section.

I installed the specific json package for Lucide which then the plugin reads from and adds into the css. The old way was to embed the SVG into the html so that is the main difference here.

I added a new wrapper for these icons (I already did this for Glutinum too) so I can easily inject them in.

The main issue I've got is no intellisense around the icons which was nice before. Really just list of literals would probably be fine based on the json data, if even required?

UPDATE:

Wrote a little script (mostly AI + your build) so I could change my code over to the tailwind way. It just generated all the literals so it's got some types in there.

The gist requires your keyword list file https://gist.github.com/mjblacker/e663676e99d6013dbfffc06e7455e9ea

I was thinking of creating another type for it like the existing iconifyIcon as a unioned string but then it won't be baked in as a literal (if I'm understanding this correctly)

Then I created a few helpers

type Icon =
    static member inline lucideClassed (cn: string list) (iconName: string) =
        Html.span [
            prop.classes (["iconify"; iconName] @ cn)
        ]

    static member inline lucide (cn: string list) =
        Icon.lucideClassed cn

    static member inline lucide (iconName: string) =
        Icon.lucideClassed [] iconName

Then I can just use in my view

Html.button [
   prop.onClick (fun _ -> menuOpen |> not |> setMenuOpen)
   prop.classes [ "w-full"; "justify-center"; "p-2"; "font-semibold"; "text-gray-600"; "hover:text-gray-900" ]
   prop.type' "button"
   prop.children [
       Icon.lucide ["h-5";"w-5"] Lucide.ellipsisVertical // with classes
       Icon.lucide Lucide.ellipsisVertical // without classes
      ]
   ]

Happy for suggestions to make this easier/cleaner

[MangelMaxime]

Looking back at the documentation again, I think the easiest solution it to use @iconify/react and use their API Provider syntax.

What would needs to be done for that is generate the list of the 200.000+ icon names possible. This would means that people would use the Iconify API provider instead of bundling the icons information in their package directly.

If people want to bundle the icons directly, more work is needed because we need to understand how to do it for only the icons needed so we can't import the IconSet.json directly etc. Perhaps, using a Vite plugin or Tailwind plugin could works but I don't have the bandwidth to do so at the moment.