phosphor-icons / react

A flexible icon family for React

Home Page:https://phosphoricons.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Export alias/tags for each icons similarly to how the search work in the documentation

Simon-Renault opened this issue · comments

I assume that since the search in the Phosphor icon documentation match or more than the name of the icon itself, the information to buidd those tags should already exist somewhere.

Screenshot 2022-10-31 at 11 42 59

Similarly to how we do :

Airplane.displayName = "Airplane";

we could do :

Airplane.tags = ["Airplane","Plane","Fight", ... ];


Use case :

Allowing users in an app to pick an icon for a given primitive. Enabling a search by tag in the front end would be great.
Same in the Figma library, adding those tags to the icon description would make it so much easier to search

This is an interesting idea, I haven't seen static component fields used for other metadata before... These tags are really more of an implementation detail of our website and plugin search, and are handwritten and not a true substitute for something like ElasticSearch or some other intelligent search mechanism, but the cost seems pretty low to add a few extra bytes to each component.

An alternative approach could be to publish a separate, framework-agnostic package with the tag and category data for every icon. This might be a bit more scalable. I'll look into it.

It would also be great to have those tags as a description for each icon in Figma, makes the search much better.

As right now to get the "fine" icon I often end up searching "document" ...

@Simon-Renault we have opted to expose a separate package, @phosphor-icons/core which will include both catalog data (tags, category, name, version released, etc.) and the raw SVG files, to be both framework/platform agnostic, and to keep bundle sizes down for the vast majority of users who do not need this. You can use it now via NPM, though it is lacking some documentation at the moment. The catalog is pegged to 1.4 release (current version).

As for adding tags to documentation description in Figma library, that's definitely something we can do!

@rektdeckard Amazing thank you so much for this! Can't wait for the Figma lib to use those as well :)

BTW, tags are now part of component descriptions in the Figma library.