Repository navigation
feat!: render icons from the Unicons line font instead of react-native-svg - #8
Merged
Merged
Conversation
…e-svg Every icon was an Svg + Path pair: two React elements and a react-native-svg view tree that parses its path on each mount. On an OrderPAD 3 (pos-app, release build), a page of 10 Open Orders rows with 40 icons settled 60ms faster with font glyphs than with SVG (383ms -> 326ms tap to settled frame, JS busy 238ms -> 205ms, 99th percentile frame 139ms -> 40ms), within ~8ms of hand-made PNGs. - generate.js now writes each UilX as createIcon(<codepoint>) using the codepoint from @iconscout/unicons json/line.json, and copies that package's fonts/line/unicons-line.ttf. It reads the font's cmap and fails if any icon has no glyph, so a font/json mismatch cannot ship blank icons. - createIcon renders one Text glyph with the same size/color/style API. Colour resolves like the SVG's currentColor: black by default, then style.color, then an explicit color prop. - The font ships with the library: Android merges android/src/main/assets/fonts into the app, the podspec copies fonts/*.ttf and Unicons.m registers it with CTFontManagerRegisterFontsForURL, and registerFont.web.js adds the @font-face. registerFont.js is empty because native needs nothing at runtime. - react-native-svg is no longer a peer dependency. 3.0.0 because rendering changes and apps no longer get SVG elements. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
generated-check runs the generator on PRs and fails when the committed icons, index or font differ from its output, so icons stay generated. pr-snapshot publishes 0.0.0-<epoch> under the snapshot dist-tag to GitHub Packages on each PR push and comments the version, so apps can try a PR without merging (same flow as orders-sdk). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Output of npm run generate with @iconscout/unicons 4.0.8 (unchanged). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
|
Important Review skippedToo many files! This PR contains 1214 files, which is 1064 over the limit of 150. To get a review, reduce the PR to 150 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to Team to raise the limit. Usage-priced reviews support at most 300 files. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Essentials Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (1214)
You can disable this status message by setting the
Comment |
|
📦 Snapshot release published:
|
rohit-till
approved these changes
Oct 2, 2026
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
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.
Summary
Icons now draw from the Unicons line font instead of
react-native-svg. The API is the same (<UilUser size={20} color="red" style={…} />), but each icon is now one text glyph instead of an SVG view tree. That's cheaper to create and draw, especially on low-end Android tills and in lists with many icons.Why
Every icon was an
Svg+Path: two React elements plus native SVG views that parse the path on every mount. Measured in pos-app on an OrderPAD 3 (release build), with one page of Open Orders (10 rows, 40 icons), 10 tab switches per version:The font is about as fast as PNGs, but it works for every icon automatically, with no per-screen work.
What changed
build/generate.js): makes eachUilXfrom its codepoint in@iconscout/unicons(still 4.0.8, so the icon set doesn't change), and copies that package'sunicons-line.ttf. It fails the build if any icon has no glyph in the font.createIcon.js: one shared component. Colour works the same as before: black by default, thenstyle.color, then thecolorprop.android/src/main/assets/fonts/, merged into the app automatically.Unicons.mregisters it.registerFont.web.jsadds the@font-face.react-native-svgis no longer a peer dependency.generated-check: fails a PR if the committed icons don't match the generator.pr-snapshot: publishes0.0.0-<timestamp>under thesnapshottag on every PR push and comments the version here, so apps can try it before merge.Testing
Areas to check in apps
🤖 Generated with Claude Code