Icons
Introduction
@phpcreation/frontend-icons-react-nextjs-bundle provides the icon libraries used across PHPCreation projects (Glyphicons v1, Glyphicons v2, Font Awesome, and the internal phpc icon set), plus the IconDropdown component used to search and pick an icon in the UI.
This page (and the pages under it) documents the icon search system
and how IconDropdown works internally: how an icon’s technical name
gets matched to French words and synonyms when someone types in the
search box, and how the component loads/paginates/selects icons. It does
not cover installing or styling the bundle itself.
The problem this solves
Every icon has a technical classname, generated from its source file name. For example:
{
"glyphicons-v2/halflings equals": "glyphicons-v2/halflings/glyphicons-halflings-174-equals.svg",
"glyphicons-v2/halflings bank": "glyphicons-v2/halflings/glyphicons-halflings-169-bank.svg"
}Searching for equals or bank works, because those words are literally in the name. But searching “égal” or “banque” (French) found nothing — the search only ever matched the English technical name, as a plain substring.
The solution, in one diagram
Two generated data files sit between the icon mapping and the search box. Nothing here is written by hand at the file level — they’re produced by script/generate-keywords.py from three source files: each icon set’s own mapping.json (already hand-maintained per Adding New Icons — it also happens to be where the generator gets its list of classnames to process) plus two small files hand-maintained specifically for search, covered on the next page.