search

vault-development / react-native-svg-uri

Render SVG images in React Native from an URL or static file
849 stars 334 forks source link

Custom "fill" #86

Open doublex opened 6 years ago

doublex commented 6 years ago

This should produce a red plus - but it is black:

let svg = '<svg width="1280" height="1280" viewBox="0 0 1280 1280" xmlns="http://www.w3.org/2000/svg"><path d="m1066.667969 426.667969h-213.335938v-213.335938c0-58.878906-47.785156-106.664062-106.664062-106.664062h-213.335938c-58.878906 0-106.664062 47.785156-106.664062 106.664062v213.335938h-213.335938c-58.878906 0-106.664062 47.785156-106.664062 106.664062v213.335938c0 58.878906 47.785156 106.664062 106.664062 106.664062h213.335938v213.335938c0 58.878906 47.785156 106.664062 106.664062 106.664062h213.335938c58.878906 0 106.664062-47.785156 106.664062-106.664062v-213.335938h213.335938c58.878906 0 106.664062-47.785156 106.664062-106.664062v-213.335938c0-58.878906-47.785156-106.664062-106.664062-106.664062zm0 320h-320l-.160157 320h-213.175781v-320h-320v-213.335938h320v-320h213.335938v320h320zm0 0"/></svg>';
return <SvgUri svgXmlData={svg} width={20} height={20} fill="#ff0000" />;
doublex commented 6 years ago

Patch:

*** index.js-old        2017-11-02 12:00:11.953067372 +0100
--- index.js    2017-11-02 12:05:38.785467557 +0100
*************** class SvgUri extends Component{
*** 220,225 ****
--- 220,227 ----

    obtainComponentAtts({attributes}, enabledAttributes) {
      const styleAtts = {};
+     if( this.state.fill )
+       styleAtts.fill = this.state.fill;
      Array.from(attributes).forEach(({nodeName, nodeValue}) => {
        Object.assign(styleAtts, utils.transformStyle({
          nodeName,