The react-icons
demo page is great, providing a fast search and a decent view into
each of the various icon providers it includes.
But it could be better.
This project intends to
- Use Next.js for an optimized React static-site generator
- Utilize Vercel for builds & fast hosting
- Use hooks to regenerate & update React-Icons to the latest version constantly
- Use OpenAI's GPT-3 to suggest keywords
This project requires a complicated build flow in order to work perfectly.
- The latest React-Icons must be pulled at build time.
- The Cloudflare KV API & OpenAI APIs are contacted to acquire keyword suggestions for the various icons in the pack.
- All changes fetched from the APIs must be updated in Algolia.
Currently, React Icons displays icons in a set ordered manner - each icon is filtered inside the set, and the sets render in the same order each time. Not only does this seem inefficient and strange, but it doesn't offer any ability to order by keyword matching.
The total icon list of all of these thousands of icons needs to be made available for searching at build time before we begin a migration to build time export & Algolia.
If possible, I'd like to animate the appearance, disappearance & shifting of the various Icons smoothly. The major issue with React Icons currently is that searching creates a flash of content.
At build time, we can fetch the most popular used icons
Icon popularity can be measured by searches & interactions through the Algolia API.
- When an icon is hovered over for more than ~1.5 seconds.
- When an icon is clicked (to copy), a strong interaction is measured.
/
The index will show a list of all of the supported icon sets, the number of icons currently available, and an icon or image display the logo of the given set. Hopefully, each of the sets has a logo of itself./[id]
Statically generated, each of the sets will have it's own page using just the identifier. They will be statically pulled from the icon manifests and have another search bar, but it only searches just the given icon set. A button will be shown to move the search from the given icon set to the global set./settings
Any settings I come up with will be on this page. This site is static and will
At build time, we'll generate a list of all the current icons and output it into a JSON file. We'll then query