search

vault-development / react-native-svg-uri

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

fill does not work #136

Closed SilencerWeb closed 5 years ago

SilencerWeb commented 6 years ago

Example call:

import Svg from 'react-native-svg-uri';

<Svg width={ 20 } height={ 20 } fill="#265df4" source={ close }/>

Example svg (stored in variable close):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.9 21.9">
  <path d="M14.1 11.3c-.2-.2-.2-.5 0-.7l7.5-7.5c.2-.2.3-.5.3-.7s-.1-.5-.3-.7L20.2.3c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.7.3l-7.5 7.5c-.2.2-.5.2-.7 0L3.1.3C2.9.1 2.6 0 2.4 0s-.5.1-.7.3L.3 1.7c-.2.2-.3.5-.3.7s.1.5.3.7l7.5 7.5c.2.2.2.5 0 .7L.3 18.8c-.2.2-.3.5-.3.7s.1.5.3.7l1.4 1.4c.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.2-.2.5-.2.7 0l7.5 7.5c.2.2.5.3.7.3s.5-.1.7-.3l1.4-1.4c.2-.2.3-.5.3-.7s-.1-.5-.3-.7l-7.5-7.5z"/>
</svg>
kimberlyluna commented 6 years ago

I had the same issue a couple of months ago. Seems to be something with react native and it's mapping of the components props, I don't know why it happens but seems to be version related since it is a recent bug.

A quick fix would be adding the following code inside your react-native-svg-uri dependency that it is inside your node_modules folder to explicitly call the prop fill onto the path component.

case 'path':
    componentAtts = this.obtainComponentAtts(node, PATH_ATTS);
    return <Path key={i} {...componentAtts} fill={this.props.fill}>{childs}</Path>;
SilencerWeb commented 5 years ago

@Kimberly-Luna thanks for responding :)

I also found another solution: open svg file and add fill to path by yourself and it will work good :)

before:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.9 21.9">
  <path d="M14.1 11.3c-.2-.2-.2-.5 0-.7l7.5-7.5c.2-.2.3-.5.3-.7s-.1-.5-.3-.7L20.2.3c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.7.3l-7.5 7.5c-.2.2-.5.2-.7 0L3.1.3C2.9.1 2.6 0 2.4 0s-.5.1-.7.3L.3 1.7c-.2.2-.3.5-.3.7s.1.5.3.7l7.5 7.5c.2.2.2.5 0 .7L.3 18.8c-.2.2-.3.5-.3.7s.1.5.3.7l1.4 1.4c.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.2-.2.5-.2.7 0l7.5 7.5c.2.2.5.3.7.3s.5-.1.7-.3l1.4-1.4c.2-.2.3-.5.3-.7s-.1-.5-.3-.7l-7.5-7.5z"/>
</svg>

after:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.9 21.9">
  <path fill="#000" d="M14.1 11.3c-.2-.2-.2-.5 0-.7l7.5-7.5c.2-.2.3-.5.3-.7s-.1-.5-.3-.7L20.2.3c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.7.3l-7.5 7.5c-.2.2-.5.2-.7 0L3.1.3C2.9.1 2.6 0 2.4 0s-.5.1-.7.3L.3 1.7c-.2.2-.3.5-.3.7s.1.5.3.7l7.5 7.5c.2.2.2.5 0 .7L.3 18.8c-.2.2-.3.5-.3.7s.1.5.3.7l1.4 1.4c.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.2-.2.5-.2.7 0l7.5 7.5c.2.2.5.3.7.3s.5-.1.7-.3l1.4-1.4c.2-.2.3-.5.3-.7s-.1-.5-.3-.7l-7.5-7.5z"/>
</svg>
WagnerWD40 commented 2 years ago

Hijacking your comment, if your SVG are composed with paths that have transparencies, the fill that you pass as a prop will override it, so to mantain the transparencies that are hard coded in the SVG you just need to change a bit your code:

case 'path': componentAtts = this.obtainComponentAtts(node, PATH_ATTS); return <Path key={i} {...componentAtts} fill={componentAtts.fill ? componentAtts.fill : this.props.fill}>{childs}</Path>;

edit: typo