feat: Add SVG support for transformed SVG components in Icon

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>
     );

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;
   }
 };

src/components/svgImage/index.tsx

@@ -1,23 +1,43 @@
 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';
 
 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;