chore: infer SVG size from style (#2742)

* chore: infer SVG size from style

* code-review

Author: AmitShwarts

src/components/button/ButtonTypes.tsx

@@ -51,6 +51,10 @@ export type ButtonProps = TouchableOpacityProps &
      * Icon image style
      */
     iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Other image props that will be passed to the image
+     */
+    iconProps?: Partial<ImageProps>;
     /**
      * Should the icon be right to the label
      */
@@ -171,7 +175,7 @@ export const DEFAULT_PROPS = {
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Animated.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx
  */
-// @ts-ignore 
+// @ts-ignore
 class FakeButtonForDocs extends PureComponent<ButtonProps> { // eslint-disable-line
   static displayName = 'Button';
 

src/components/button/button.api.json

@@ -25,6 +25,7 @@
       "description": "Icon image source or a callback function that returns a source"
     },
     {"name": "iconStyle", "type": "ImageStyle", "description": "Icon image style"},
+    {"name": "iconProps", "type": "Partial<ImageProps>", "description": "Icon image props"},
     {"name": "iconOnRight", "type": "boolean", "description": "Should the icon be right to the label"},
     {"name": "supportRTL", "type": "boolean", "description": "whether the icon should flip horizontally on RTL locals"},
     {"name": "backgroundColor", "type": "string", "description": "Color of the button background"},

src/components/button/index.tsx

@@ -292,7 +292,7 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   renderIcon() {
-    const {iconSource, supportRTL, testID} = this.props;
+    const {iconSource, supportRTL, testID, iconProps} = this.props;
 
     if (iconSource) {
       const iconStyle = this.getIconStyle();
@@ -302,10 +302,24 @@ class Button extends PureComponent<Props, ButtonState> {
       } else {
         if (Constants.isWeb) {
           return (
-            <Icon style={iconStyle} tintColor={Colors.$iconDefault} source={iconSource} testID={`${testID}.icon`}/>
+            <Icon
+              style={iconStyle}
+              tintColor={Colors.$iconDefault}
+              source={iconSource}
+              testID={`${testID}.icon`}
+              {...iconProps}
+            />
           );
         }
-        return <Image source={iconSource} supportRTL={supportRTL} style={iconStyle} testID={`${testID}.icon`}/>;
+        return (
+          <Image
+            source={iconSource}
+            supportRTL={supportRTL}
+            style={iconStyle}
+            testID={`${testID}.icon`}
+            {...iconProps}
+          />
+        );
       }
     }
     return null;