Merge pull request vault-development#105 from uphold/enhancement/custom-fill

Add ability to customize fill color

Author: matc4

README.md

@@ -27,6 +27,7 @@ react-native link react-native-svg # not react-native-svg-uri !!!
 | `source` | `ImageSource` |  | Same kind of `source` prop that `<Image />` component has
 | `svgXmlData` | `String` |  | You can pass the SVG as String directly
 | `fill` | `Color` |  | Overrides all fill attributes of the svg file
+| `fillAll` | `Boolean` |  Adds the fill color to the entire svg object
 
 ## Known Bugs
 

index.d.ts

@@ -34,6 +34,11 @@ interface SvgUriProps {
      * Fill color for the svg object
      */
     fill?: string
+
+    /**
+     * Fill the entire svg element with same color
+     */
+    fillAll?: boolean
 }
 
 export default class SvgUri extends Component<SvgUriProps, {}> { }

index.js

@@ -220,6 +220,11 @@ class SvgUri extends Component{
 
   obtainComponentAtts({attributes}, enabledAttributes) {
     const styleAtts = {};
+
+    if (this.state.fill && this.props.fillAll) {
+      styleAtts.fill = this.state.fill;
+    }
+
     Array.from(attributes).forEach(({nodeName, nodeValue}) => {
       Object.assign(styleAtts, utils.transformStyle({
         nodeName,
@@ -303,6 +308,7 @@ SvgUri.propTypes = {
   svgXmlData: PropTypes.string,
   source: PropTypes.any,
   fill: PropTypes.string,
+  fillAll: PropTypes.bool
 }
 
 module.exports = SvgUri;