feat(web): migrate all icons to Font Awesome Pro - #64
Merged
Conversation
Replace every lucide-react icon (~200 distinct across 166 files) with Font Awesome Pro from the @awesome.me/kit-6050953220 kit, rendered via <FontAwesomeIcon>. lucide-react is removed entirely. - Runtime: FA core CSS imported in index.css `layer(base)` + config.autoAddCss=false in main.tsx so Tailwind size-* utilities still control icon sizing. - Data-driven icons store IconDefinition (not components) and render via FontAwesomeIcon; icon-typed fields use IconDefinition. - Cluster brand marks (aws/gcp/azure/kubernetes/docker) stay react-icons via a shared <ClusterIcon> helper — the FA Pro kit has no brand family. - .npmrc carries the FA registry mappings only (token lives in ~/.npmrc / CI secret, never committed and never bundled). - Tests query FA icons via [data-icon=...] instead of .lucide-*. Verified: web typecheck clean, production build clean, full suite green (1738).
tyrelchambers
marked this pull request as ready for review
July 18, 2026 03:35
tyrelchambers
added a commit
that referenced
this pull request
Jul 19, 2026
The FA Pro migration (#64) added @fortawesome/@awesome.me packages on the private npm.fontawesome.com registry; the release install 401s without a token. Load it from 1Password (same service account as macOS signing) on every runner and write it to .npmrc before pnpm install. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Replaces every
lucide-reacticon inapps/web(~200 distinct icons across 176 files) with Font Awesome Pro from the@awesome.me/kit-6050953220kit, rendered via<FontAwesomeIcon>.lucide-reactis removed as a dependency.How
index.cssvia@import "…/styles.css" layer(base);andconfig.autoAddCss = falseinmain.tsx, so Tailwindsize-*utilities still control icon size (FA otherwise sizes to1em).size={N}→size-[Npx],strokeWidthdropped,color="x"→style.IconDefinition(not a component) and render via<FontAwesomeIcon icon={def} />; icon-typed fields useIconDefinition.react-icons— the FA Pro kit ships no brand family — behind a shared<ClusterIcon>helper.Security
.npmrc(committed) carries only the FA registry mappings. The auth token lives in~/.npmrc/ a CI secret — never committed and never bundled (it's install-time only).Verification
pnpm --filter web typecheck— cleanpnpm --filter web build— clean (kit imports resolve, CSS layer works)pnpm --filter web test— 1738 passed🤖 Generated with Claude Code