Add tint color to Img component

1 files changed, 29 insertions, 3 deletions

diff --git a/app/components/Img.js b/app/components/Img.js
index 0c687ff654..9511a4ecb3 100644
--- a/app/components/Img.js
+++ b/app/components/Img.js
@@ -3,11 +3,37 @@ import React from 'react';
 import { View, Component } from 'reactxp';
 
 export default class Img extends Component {
+  props: {
+    source: string,
+    tintColor?: string
+  };
+
   render() {
-    const url = './assets/images/' + this.props.source + '.svg';
+    const { source, tintColor, ...otherProps } = this.props;
+    const url = './assets/images/' + source + '.svg';
+    let image;
 
-    const style = this.props.style;
+    if(tintColor) {
+      image = (
+        <div style={{
+          WebkitMaskImage: `url('${url}')`,
+          WebkitMaskRepeat: 'no-repeat',
+          backgroundColor: tintColor,
+        }}>
+          <img src={ url } style={{
+            visibility: 'hidden',
+          }} />
+        </div>
+      );
+    } else {
+      image = (
+        <img src={ url } />
+      );
+    }
 
-    return (<View style={ style }> <img src={ url } /> </View>);
+    return (
+      <View { ...otherProps }>
+        { image }
+      </View>);
   }
 }