Need to be able to programmatically list the icons available in react-icons by icon name

[GeoffCoxMSFT]

trafficstars

Frameworks consuming the icons in react-icons (and maybe svg-icons) allow callers to reference icons by name. For example, in Fluent UI v8 the Icon component's IconProps has an icon name.

As part of the upgrade work from Fluent v8 to v9, I need to be able to map IconProps icon name to an icon in react-icons. I can built the list of icon names manually, but they are likely to get out of date.

Packages that have a list of assets like react-icons should export a const list of the names of the assets (or maybe even richer meta-data about the assets if they have things like specific sizes, support LTR/RTL, or are multi-color). This could be generated by a script that examines the codebase for exported icons or svg.

[GeoffCoxMSFT]

@tomi-msft Here is the issue I mentioned in chat. I don't have perms on this repo to assign it to you though :)

[NewFuture]

👀

[henry2man]

Hi there. In fluent_ui package for Flutter (https://github.com/bdlukaa/fluent_ui/) we did something similar using the generator class. The solution we implemented was to create a <String, Icon> map that could be used for searching. In fact, we use this map to be able to create a gallery of icons and to be able to search on it with text and click-to-copy icon name (this is super useful for development 🚀).

You can check the code at https://github.com/bdlukaa/fluent_ui/pull/124 although I think the concept is simple and can be transferred to all the implementations in this repository, both at the search level and to provide a gallery of icons like the one we have there.

If you want to see the gallery live, you can access https://bdlukaa.github.io/fluent_ui/ and then click on the side menu in the "Icons" section:

// CC @bdlukaa // Related Flutter issues: https://github.com/flutter/flutter/issues/97727 --> https://github.com/dart-lang/dartdoc/issues/2932 https://github.com/dart-lang/dartdoc/issues/2932