chore: respect width & height props on web for SvgImage

Author: AmitShwarts

src/components/icon/icon.api.json

@@ -11,6 +11,8 @@
     {"name": "assetGroup", "type": "string", "description": "the asset group, default is icons"},
     {"name": "tintColor", "type": "string", "description": "The icon tint"},
     {"name": "size", "type": "number", "description": "The icon size"},
+    {"name": "height", "type": "number | string", "description": "The icon height"},
+    {"name": "width", "type": "number | string", "description": "The icon width"},
     {"name": "supportRTL", "type": "boolean", "description": "whether the image should flip horizontally on RTL locals"},
     {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"}
   ],

src/components/icon/index.tsx

@@ -25,6 +25,14 @@ export type IconProps = Omit<ImageProps, 'source'> &
      * the icon size
      */
     size?: number;
+    /**
+     * the icon height
+     */
+    height?: number | string;
+    /**
+     * the icon width
+     */
+    width?: number | string;
     /**
      * whether the icon should flip horizontally on RTL
      */
@@ -53,10 +61,12 @@ const Icon = forwardRef((props: Props, ref: any) => {
     assetName,
     modifiers,
     recorderTag,
+    width,
+    height,
     ...others
   } = props;
   const {margins} = modifiers;
-  const iconSize = size ? {width: size, height: size} : undefined;
+  const iconSize = size ? {width: width ?? size, height: height ?? size} : undefined;
   const shouldFlipRTL = supportRTL && Constants.isRTL;
 
   const iconSource = useMemo(() => {

src/components/svgImage/index.web.tsx

@@ -13,10 +13,12 @@ export interface SvgImageProps {
   tintColor?: string | null;
   data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
   style?: object[];
+  width?: number | string;
+  height?: number | string;
 }
 
 function SvgImage(props: SvgImageProps) {
-  const {data, style = [], tintColor, ...others} = props;
+  const {data, style = [], tintColor, width, height, ...others} = props;
   const [id] = useState(`svg-${new Date().getTime().toString()}`);
   const [svgStyleCss, setSvgStyleCss] = useState<string | undefined>(undefined);
 
@@ -25,13 +27,13 @@ function SvgImage(props: SvgImageProps) {
       const {postcss, cssjs} = PostCssPackage;
       const styleObj: Record<string, any> = StyleSheet.flatten(style);
       postcss()
-        .process(styleObj, {parser: cssjs})
+        .process({width, height, ...styleObj}, {parser: cssjs})
         .then((style: {css: any}) => {
           const svgPathCss = (styleObj?.tintColor) ? `#${id} svg path {fill: ${styleObj?.tintColor}}` : '';
           setSvgStyleCss(`#${id} svg {${style.css}} #${id} {${style.css}} ${svgPathCss}}`);
         });
     }
-  }, [style, id]);
+  }, [style, id, width, height]);
 
   if (isSvgUri(data)) {
     return <img {...others} src={data.uri} style={StyleSheet.flatten(style)}/>;

webDemo/src/App.tsx

@@ -55,10 +55,14 @@ const itemsToRender: ItemToRender[] = [
           size={Button.sizes.large}
           iconSource={svgData}
           iconStyle={{
-            width: size,
-            height: size,
+            // width: size,
+            // height: size,
             tintColor: '#ffffff'
           }}
+          iconProps={{
+            width: size,
+            height: size
+          }}
           onPress={() => {
             const newSize = size === Spacings.s4 ? Spacings.s6 : Spacings.s4;
             setSize(newSize);