Repository navigation
feat(icons): size the mark to Apple's proportions, assemble it from layer art - #9
Merged
Merged
Conversation
…ayer art Two fixes to how the mark is placed and where it comes from. Sizing. Every centred surface used a hardcoded 0.6 of the shorter side, with an iconScale option no caller ever passed. Worse, the scale sized the *artboard*, so a designer's own transparent margin shrank the mark again: Tomo TV's art fills 67.6% of its 1024 artboard, which put the iOS mark at 40.6% of the icon against the ~80% Apple's grid calls for. The icon is now normalised to the square its visible artwork occupies before scaling, so the number means "the mark covers N% of the canvas" whatever padding the source carries. Defaults follow Apple: 0.8 on iOS (icon grid, ~10% margin) and 0.75 on tvOS (inside the 10-15% parallax safe margin, since a focused icon scales ~1.05-1.1x and its layers slide against each other). Both are settable per project with --ios-icon-scale and --tv-icon-scale, in a config file, or through the plugin. One content box is measured per run, from the flat icon, and applied to every surface and every parallax layer. Sharing one transform is what keeps the layers registered; normalising each layer to its own bounds would slide the front layer off the middle one. The splash logo is untouched, it already fills its square. Assembly. --icon is now optional when every icon layer carries its own art: the flat icon is composited from that art back to front and used for the appiconset, Top Shelf, splash logo and icon.png. Tomo TV's icon.svg was byte-for-byte layer-middle.svg plus layer-front.svg, a third file kept in sync by hand. Verified against Tomo TV's real art: iOS lands at 80.0% and the tvOS middle layer at 75.0%, with the front layer still registered inside it.
keiver
force-pushed
the
feat/icon-scale-and-assembly
branch
from
September 7, 2026 03:20
b43d95f to
44c7bd2
Compare
Contributor
|
Released as v1.5.0 and published to npm. |
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.
Sizing
Every centred surface used a hardcoded
0.6of the shorter side, via aniconScaleoption no caller ever passed. And the scale sized the artboard, so a designer's own transparent margin shrank the mark again. Tomo TV's art fills 67.6% of its 1024 artboard, so the iOS mark landed at0.6 × 0.676 = 40.6%of the icon against the ~80% Apple's grid calls for.The icon is now normalised to the square its visible artwork occupies before scaling, so the number means "the mark covers N% of the canvas" whatever padding the source carries.
--ios-icon-scale0.8--tv-icon-scale0.75Both settable per project via CLI, config file, or the plugin (
iosIconScale/tvIconScale).One content box is measured per run, from the flat icon, and applied to every surface and every parallax layer. Sharing one transform is what keeps the layers registered: normalising each layer to its own bounds would slide the front layer off the middle one. The splash logo is untouched, it already fills its square.
Assembly
--iconis now optional when every icon layer carries its own art. The flat icon is composited from that art back to front and used for the appiconset, Top Shelf, splash logo andicon.png. Tomo TV'sicon.svgwas byte-for-bytelayer-middle.svg+layer-front.svg, a third file kept in sync by hand.Verified
Against Tomo TV's real art, measured from the generated PNGs:
icon-1024Front layer still registered inside the middle layer's body. 325 tests pass (8 new).
Heads up on the version label
Labelled
version:minor: the CLI/config API is backward compatible, every existing flag still works. But the generated icons change proportions for every existing project, which is a visible output change. Relabel toversion:majorbefore merging if you'd rather signal that.Merging publishes to npm via
release.yml.