fix: [WEB] SvgImage update styles

Author: AmitShwarts

src/components/svgImage/index.web.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import Image from '../image';
 import {isSvg, isSvgUri, isBase64ImageContent} from '../../utils/imageUtils';
@@ -13,21 +13,41 @@ export interface SvgImageProps {
   style?: object[];
 }
 
+function injectID(data: SvgImageProps['data'], id: string) {
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = data;
+
+  const svgElement = tempDiv.querySelector('svg');
+  svgElement?.setAttribute('id', id);
+
+  const modifiedData = tempDiv.innerHTML;
+
+  return modifiedData;
+}
+
 function SvgImage(props: SvgImageProps) {
   const {data, style = [], tintColor, ...others} = props;
+  const [id] = useState(`svg-${new Date().getTime().toString()}`);
+  const [_data, setData] = useState((injectID(data, id)));
   const [svgStyleCss, setSvgStyleCss] = useState<string | undefined>(undefined);
-  const [postCssStyleCalled, setPostCssStyleCalled] = useState(false);
 
-  const createStyleSvgCss = async (PostCssPackage: {postcss: any; cssjs: any}, styleObj?: Record<string, any>) => {
-    setPostCssStyleCalled(true);
-    const {postcss, cssjs} = PostCssPackage;
-    postcss()
-      .process(styleObj, {parser: cssjs})
-      .then((style: {css: any}) => {
-        const svgPathCss = (styleObj?.tintColor) ? `svg path {fill: ${styleObj?.tintColor}}` : '';
-        setSvgStyleCss(`svg {${style.css}} ${svgPathCss}}`);
-      });
-  };
+  useEffect(() => {
+    const PostCssPackage = require('../../optionalDependencies').PostCssPackage;
+    if (PostCssPackage) {
+      const {postcss, cssjs} = PostCssPackage;
+      const styleObj: Record<string, any> = StyleSheet.flatten(style);
+      postcss()
+        .process(styleObj, {parser: cssjs})
+        .then((style: {css: any}) => {
+          const svgPathCss = (styleObj?.tintColor) ? `svg path {fill: ${styleObj?.tintColor}}` : '';
+          setSvgStyleCss(`svg {${style.css}} ${svgPathCss}}`);
+        });
+    }
+  }, [style]);
+
+  useEffect(() => {
+    setData(injectID(data, id));
+  }, [data, id]);
 
   if (isSvgUri(data)) {
     return <img {...others} src={data.uri} style={StyleSheet.flatten(style)}/>;
@@ -44,26 +64,15 @@ function SvgImage(props: SvgImageProps) {
       );
     }
     return <img {...others} src={data} style={StyleSheet.flatten(style)}/>;
-  } else if (data) {
-    
-    const PostCssPackage = require('../../optionalDependencies').PostCssPackage;
-    if (PostCssPackage) {
-      if (!postCssStyleCalled) {
-        createStyleSvgCss(PostCssPackage, StyleSheet.flatten(style));
-        return null;
-      }
-      
-      if (svgStyleCss) {
-        const svgStyleTag = `<style> ${svgStyleCss} </style>`;
-        return (
-          <div
-            {...others}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{__html: svgStyleTag + data}}
-          />
-        );
-      }
-    }
+  } else if (data && svgStyleCss) {
+    const svgStyleTag = `<style> ${svgStyleCss} </style>`;
+    return (
+      <div
+        {...others}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{__html: svgStyleTag + _data}}
+      />
+    );
   }
   return null;
 }

webDemo/src/App.tsx

@@ -41,6 +41,32 @@ interface ItemToRender {
 const svgData = '<svg data-bbox="18.5 31.5 163.1 137.2" viewBox="0 0 200 200" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="color">\n    <g>\n        <path d="M18.5 99.5c0-5.7 2.3-10.8 6-14.5L72 37.5c3.7-3.7 8.8-6 14.5-6 11.4 0 20.5 9.2 20.5 20.5 0 5.7-2.3 10.8-6 14.5L88.1 79.4h72.3c11.7 0 21.2 9.5 21.2 21.2s-9.5 21.2-21.2 21.2H89.1l11.9 11.9c3.7 3.7 6 8.8 6 14.5 0 11.3-9.2 20.5-20.5 20.5-5.7 0-10.8-2.3-14.5-6L24.5 115c-3.7-3.7-6-8.8-6-14.5 0-.2 0-.4.1-.6 0 0-.1-.3-.1-.4z" fill="#000010" data-color="1"/>\n    </g>\n</svg>\n';
 
 const itemsToRender: ItemToRender[] = [
+  {
+    title: 'IconButton SVG Resize',
+    FC: () => {
+      const [size, setSize] = useState(Spacings.s4);
+
+      console.log('$$ IconButton SVG Resize', {size});
+
+      return (
+        <Button
+          round
+          id={'iconButton_resize_svg'}
+          size={Button.sizes.large}
+          iconSource={svgData}
+          iconStyle={{
+            width: size,
+            height: size,
+            tintColor: '#ffffff'
+          }}
+          onPress={() => {
+            const newSize = size === Spacings.s4 ? Spacings.s6 : Spacings.s4;
+            setSize(newSize);
+          }}
+        />
+      );
+    }
+  },
   {
     title: 'Carousel',
     FC: CarouselWrapper
@@ -97,6 +123,7 @@ const itemsToRender: ItemToRender[] = [
     FC: () => (
       <Button
         label={'Svg tag'}
+        id={'iconButton'}
         size={Button.sizes.large}
         iconSource={svgData}
         iconStyle={{