chore: [WEB] SvgImage respect width & height props (#2749)

Author: AmitShwarts

src/components/icon/index.tsx

@@ -76,7 +76,7 @@ const Icon = forwardRef((props: Props, ref: any) => {
     />
   );
 
-  const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...props} {...iconSize}/>;
+  const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props}/>;
 
   if (typeof source === 'string' && isBase64ImageContent(source) && Constants.isWeb) {
     return renderImage();

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[];
+  height?: number;
+  width?: number;
 }
 
 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,12 @@ const itemsToRender: ItemToRender[] = [
           size={Button.sizes.large}
           iconSource={svgData}
           iconStyle={{
-            width: size,
-            height: size,
             tintColor: '#ffffff'
           }}
+          iconProps={{
+            width: size,
+            height: size
+          }}
           onPress={() => {
             const newSize = size === Spacings.s4 ? Spacings.s6 : Spacings.s4;
             setSize(newSize);