@expo/styleguide-icons
v4.2.3
Published
Expo's icons for use on the web.
Maintainers
Keywords
Readme
@expo/styleguide-icons
Expo's icons for use on the web.
Getting started
- Install deps at the repo root:
yarn. - Copy
.env.exampleto.envand setFIGMA_TOKENto a personal access token (Figma → avatar → Settings → Security → Personal access tokens). - Build:
yarn build(from this package) oryarn buildfrom the repo root.
Without a FIGMA_TOKEN the build falls back to an empty stub so downstream packages still compile.
Scripts
| Command | What it does |
| --- | --- |
| yarn build | Smart build. Checks Figma's lastModified; if unchanged, skips the API entirely and re-bundles the existing sources. |
| yarn build-stub | Emits an empty package (no Figma, no icons). Used when FIGMA_TOKEN is missing. |
| yarn refresh | Forces a Figma pull then rebuilds. Prints a timing breakdown (figmaExport / bundle / …). Available at the repo root too. |
Pipeline
One Node script — scripts/build.mjs — drives everything:
- Figma gate. Fetches the Figma file's
lastModifiedand compares it to.figma-cache.json. Unchanged → skip export. - Figma export. Runs
@figma-export/corein-process with all four pages in parallel.figma-js'sClientis wrapped in a Proxy that retries on HTTP 429 respectingRetry-After(Figma's recommendation). A live status line (TTY) collapses the per-icon progress; CI logs get per-page milestones only. - Bundle. A single
esbuild.buildpass (bundle: false, minify, CJS, JSX automatic) transforms ~3,600.tsxfiles straight into the final layout at the package root (custom/,duotone/,outline/,solid/,mergeClasses.js). Nodist/intermediate, no postbundle copy. - Types. Every icon's
.d.tshas an identical shape, so we template them instead of runningtsc— near-instant. - Incremental. An icon is skipped if its
.jsand.d.tsare both newer than the source.tsx.
Typical wall-times:
| Scenario | Time |
| --- | --- |
| No-op (Figma cached, outputs fresh) | ~0.5s |
| Clean bundle (Figma cached, no output) | ~1.5s |
| Force refresh (yarn refresh) | ~30–50s (Figma-bound; rate limit dependent) |
CI caches src/{custom,duotone,outline,solid} + .figma-cache.json separately, keyed only on Figma's lastModified, so every branch and PR reuses the same Figma snapshot — unrelated code pushes don't trigger a Figma refresh.
