From fc897082826dea8e09b3663b7124a56c45729cb2 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Wed, 20 Aug 2025 12:40:10 +0300
Subject: [PATCH] feat: Add SVG  support for transformed SVG components in Icon

---
 demo/src/screens/PlaygroundScreen.tsx | 31 ++++++++++++++++++++-------
 src/assets/internal/icons/addFlat.svg |  3 +++
 src/assets/internal/icons/heart.svg   |  3 +++
 src/assets/internal/icons/index.js    |  6 ++++++
 src/components/svgImage/index.tsx     | 25 +++++++++++++++++++--
 5 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/internal/icons/addFlat.svg
 create mode 100644 src/assets/internal/icons/heart.svg

diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
index 0bda100e67..5d96aefc65 100644
--- a/demo/src/screens/PlaygroundScreen.tsx
+++ b/demo/src/screens/PlaygroundScreen.tsx
@@ -1,18 +1,33 @@
 import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
+import {View, Icon, Assets, Colors} from 'react-native-ui-lib';
 
 export default class PlaygroundScreen extends Component {
   render() {
     return (
       <View bg-grey80 flex padding-20>
         <View marginT-20>
-          <TextField migrate placeholder="Placeholder"/>
-        </View>
-        <Card height={100} center padding-20>
-          <Text text50>Playground Screen</Text>
-        </Card>
-        <View flex center>
-          <Button marginV-20 label="Button"/>
+          <Icon
+            source={Assets.internal.icons.addFlat}
+            size={32}
+            tintColor={Colors.green30}
+            style={{
+              borderColor: 'green',
+              borderWidth: 1,
+              backgroundColor: 'yellow',
+              tintColor: 'blue'
+            }}
+          />
+          <Icon
+            source={Assets.internal.icons.heart}
+            size={32}
+            tintColor={Colors.green30}
+            style={{
+              borderColor: 'green',
+              borderWidth: 1,
+              backgroundColor: 'yellow',
+              tintColor: 'blue'
+            }}
+          />
         </View>
       </View>
     );
diff --git a/src/assets/internal/icons/addFlat.svg b/src/assets/internal/icons/addFlat.svg
new file mode 100644
index 0000000000..34ff28a1a1
--- /dev/null
+++ b/src/assets/internal/icons/addFlat.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12C2.25 6.61522 6.61522 2.25 12 2.25ZM12.1504 8.25C11.7362 8.25 11.4004 8.58579 11.4004 9V11.25H9.15039C8.73618 11.25 8.40039 11.5858 8.40039 12C8.40039 12.4142 8.73618 12.75 9.15039 12.75H11.4004V15C11.4004 15.4142 11.7362 15.75 12.1504 15.75C12.5646 15.75 12.9004 15.4142 12.9004 15V12.75H15.1504C15.5646 12.75 15.9004 12.4142 15.9004 12C15.9004 11.5858 15.5646 11.25 15.1504 11.25H12.9004V9C12.9004 8.58579 12.5646 8.25 12.1504 8.25Z" fill="#20303C"/>
+</svg>
diff --git a/src/assets/internal/icons/heart.svg b/src/assets/internal/icons/heart.svg
new file mode 100644
index 0000000000..9fbe923f00
--- /dev/null
+++ b/src/assets/internal/icons/heart.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3251 12.6749L12.3536 19.6464C12.1583 19.8417 11.8417 19.8417 11.6464 19.6464L4.67486 12.6749C3.14865 11.1486 3.00361 8.72268 4.33711 7.0255C5.98281 4.93097 9.12475 4.84138 10.8871 6.83874L11.2854 7.29009C11.6648 7.72007 12.3352 7.72007 12.7146 7.29009L13.1129 6.83874C14.8753 4.84138 18.0172 4.93097 19.6629 7.0255C20.9964 8.72268 20.8514 11.1486 19.3251 12.6749Z" stroke="#20303C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/internal/icons/index.js b/src/assets/internal/icons/index.js
index e959377ab2..8cad3cca2b 100644
--- a/src/assets/internal/icons/index.js
+++ b/src/assets/internal/icons/index.js
@@ -46,5 +46,11 @@ export const icons = {
   },
   get xSmall() {
     return require('./xSmall.png');
+  },
+  get addFlat() {
+    return require('./addFlat.svg').default;
+  },
+  get heart() {
+    return require('./heart.svg').default;
   }
 };
diff --git a/src/components/svgImage/index.tsx b/src/components/svgImage/index.tsx
index f7c16ddd5f..302c297f7a 100644
--- a/src/components/svgImage/index.tsx
+++ b/src/components/svgImage/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {StyleProp, ImageStyle, ColorValue} from 'react-native';
 import {isSvg, isSvgUri} from '../../utils/imageUtils';
 import {SvgPackage, SvgCssUri} from '../../optionalDependencies';
 import {LogService} from 'services';
@@ -6,18 +7,37 @@ import {LogService} from 'services';
 const SvgXml = SvgPackage?.SvgXml;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
+type SvgTintProps = {
+  fill?: ColorValue;
+  stroke?: ColorValue;
+};
+
+const createSvgTintProps = (style: StyleProp<ImageStyle> | undefined,
+  tintColor: string | null | undefined): SvgTintProps | undefined => {
+  const svgProps: SvgTintProps = {};
+  const effectiveTintColor =
+    (style && typeof style === 'object' && 'tintColor' in style ? style.tintColor : undefined) || tintColor;
+
+  if (effectiveTintColor) {
+    svgProps.fill = effectiveTintColor;
+    svgProps.stroke = effectiveTintColor;
+  }
+  return svgProps;
+};
+
 export interface SvgImageProps {
   /**
    * the asset tint
    */
   tintColor?: string | null;
   data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
+  style?: StyleProp<ImageStyle> | undefined;
 }
 
 function SvgImage(props: SvgImageProps) {
   // tintColor crashes Android, so we're removing this until we properly support it.
   // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-  const {data, tintColor, ...others} = props;
+  const {data, tintColor, style, ...others} = props;
 
   if (!SvgXml) {
     // eslint-disable-next-line max-len
@@ -31,7 +51,8 @@ function SvgImage(props: SvgImageProps) {
     return <SvgXml xml={data} {...others} display={undefined}/>;
   } else if (data) {
     const File = data; // Must be with capital letter
-    return <File {...others} display={undefined}/>;
+    const svgProps = createSvgTintProps(style, tintColor);
+    return <File {...others} {...svgProps} style={style} display={undefined}/>;
   }
 
   return null;