Skip to content

feat(image): ios system icons styling by font-size and font-weight #10706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 21, 2025

Conversation

NathanWalker
Copy link
Contributor

@NathanWalker NathanWalker commented Feb 21, 2025

PR Checklist

What is the current behavior?

When using iosSymbolScale="large" the icon may appear oddly small. This is expected behavior based on how iOS system icons are handled as their scale is relative, not absolute.

What is the new behavior?

iOS system icon scale can be influenced by font-size and font-weight alongside scale to better control the desired size of the system icon.

For example, an Image like this:

<Image src="sys://steeringwheel.and.hands" iosSymbolScale="large" />

Would likely appear quite small, however we can now add font-size (as well as font-weight) to get a more appropriate size for desired usage:

<Image src="sys://steeringwheel.and.hands" iosSymbolScale="large" style="font-size: 45; font-weight: bold;" />

This can be applied via any css packages as well, like tailwind text-7xl font-bold would have same effect.
ref: https://developer.apple.com/documentation/uikit/configuring-and-displaying-symbol-images-in-your-ui

@NathanWalker NathanWalker added this to the 8.9 milestone Feb 21, 2025
@NathanWalker NathanWalker changed the title feat(image): ios system icons styling by font-size and font-weight al… feat(image): ios system icons styling by font-size and font-weight Feb 21, 2025
@NathanWalker NathanWalker merged commit e52d13b into main Feb 21, 2025
0 of 3 checks passed
@NathanWalker NathanWalker deleted the feat/ios-symbol-font-size-weight branch February 21, 2025 23:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant