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

Author: NathanWalker

apps/toolbox/src/pages/image-handling.xml

@@ -28,7 +28,7 @@
                 <Image row="3" col="1" src="sys://square.and.arrow.up" width="100" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
 
                 <Image row="4" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
-                <Image row="4" col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" iosSymbolScale="large" padding="8" />
+                <Image row="4" col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" iosSymbolScale="large" style="font-size: 45; font-weight: bold;" />
 
             </GridLayout>
         </apple>

packages/core/image-source/index.d.ts

@@ -1,6 +1,7 @@
 import { ImageAsset } from '../image-asset';
 import { Font } from '../ui/styling/font';
 import { Color } from '../color';
+import type { ImageBase } from '../ui/image/image-common';
 /**
  * Encapsulates the common abstraction behind a platform specific object (typically a Bitmap) that is used as a source for images.
  */
@@ -64,13 +65,13 @@ export class ImageSource {
 	 * Loads this instance from the specified system image name.
 	 * @param name the name of the system image
 	 */
-	static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource;
+	static fromSystemImageSync(name: string, instance: ImageBase): ImageSource;
 
 	/**
 	 * Loads this instance from the specified system image name asynchronously.
 	 * @param name the name of the system image
 	 */
-	static fromSystemImage(name: string, scale?: iosSymbolScaleType): Promise<ImageSource>;
+	static fromSystemImage(name: string, instance: ImageBase): Promise<ImageSource>;
 
 	/**
 	 * Loads this instance from the specified file.

packages/core/image-source/index.ios.ts

@@ -1,6 +1,7 @@
 // Definitions.
 import { ImageSource as ImageSourceDefinition, iosSymbolScaleType } from '.';
 import { ImageAsset } from '../image-asset';
+import type { ImageBase } from '../ui/image/image-common';
 import * as httpModule from '../http';
 import { Font } from '../ui/styling/font';
 import { Color } from '../color';
@@ -86,9 +87,9 @@ export class ImageSource implements ImageSourceDefinition {
 		}
 	}
 
-	static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource {
-		if (scale) {
-			const image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale)));
+	static fromSystemImageSync(name: string, instance?: ImageBase): ImageSource {
+		if (instance?.iosSymbolScale) {
+			const image = ImageSource.systemImageWithConfig(name, instance);
 			return image ? new ImageSource(image) : null;
 		} else {
 			const image = UIImage.systemImageNamed(name);
@@ -97,12 +98,12 @@ export class ImageSource implements ImageSourceDefinition {
 		}
 	}
 
-	static fromSystemImage(name: string, scale?: iosSymbolScaleType): Promise<ImageSource> {
+	static fromSystemImage(name: string, instance?: ImageBase): Promise<ImageSource> {
 		return new Promise<ImageSource>((resolve, reject) => {
 			try {
 				let image: UIImage;
-				if (scale) {
-					image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale)));
+				if (instance?.iosSymbolScale) {
+					image = ImageSource.systemImageWithConfig(name, instance);
 				} else {
 					image = UIImage.systemImageNamed(name);
 				}
@@ -117,6 +118,12 @@ export class ImageSource implements ImageSourceDefinition {
 		});
 	}
 
+	static systemImageWithConfig(name: string, instance?: ImageBase) {
+		const fontSize = instance.style.fontSize;
+		const fontWeight = instance.style.fontWeight;
+		return UIImage.systemImageNamedWithConfiguration(name, fontSize ? UIImageSymbolConfiguration.configurationWithPointSizeWeightScale(fontSize, fontWeight === 'bold' ? UIImageSymbolWeight.Bold : UIImageSymbolWeight.Regular, ImageSource.iosSystemScaleFor(instance.iosSymbolScale)) : UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(instance.iosSymbolScale)));
+	}
+
 	static fromResourceSync(name: string): ImageSource {
 		const nativeSource = (<any>UIImage).tns_safeImageNamed(name) || (<any>UIImage).tns_safeImageNamed(`${name}.jpg`);
 

packages/core/ui/image/image-common.ts

@@ -89,10 +89,10 @@ export abstract class ImageBase extends View implements ImageDefinition {
 				} else if (value.indexOf(SYSTEM_PREFIX) === 0) {
 					const sysPath = value.slice(SYSTEM_PREFIX.length);
 					if (sync) {
-						imageLoaded(ImageSource.fromSystemImageSync(sysPath, this.iosSymbolScale));
+						imageLoaded(ImageSource.fromSystemImageSync(sysPath, this));
 					} else {
 						this.imageSource = null;
-						ImageSource.fromSystemImage(sysPath, this.iosSymbolScale).then(imageLoaded);
+						ImageSource.fromSystemImage(sysPath, this).then(imageLoaded);
 					}
 				} else {
 					if (sync) {