Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for "currentColor" and "inherit" color values.

See original GitHub issue

I have a use case where I want to define a symbol with certain inherited values, and reference it within different contexts:

<svg width="256" height="256">
  <symbol id="foo">
    <circle cx="128" cy="128" r="64" fill="inherit" />
  </symbol>
  <g fill="orange">
    <use href="#foo" />
  </g>
  <g fill="pink">
    <use href="#foo" />
  </g>
</svg>

However, it appears that the inherit and currentColor values are not currently supported.

It seems like this could be supported on the js side by using React context, and resolving to “final” values before the bridge. However, I did see that there is already a native context for inheritance of text properties.

What would your preference be on how to implement this: introduce react context, or build off of the existing native context?

This is related to #589.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

msandcommented, Oct 4, 2018

I have partial support here: https://github.com/react-native-community/react-native-svg/commit/1827b918833efdaa25cfc1a76df2164cb2bcdd2b

0reactions

VincentCATILLONcommented, Jan 4, 2019

For those searching for a way to use react-native-svg (version 6.x and below) with SVG containing currentColor or inherit value in fill attribute.

Let’s take a look at this PR which replaces currentColor (or inherit) values by reference to props.color and so emulate the currentColor behaviour.

https://github.com/CoorpAcademy/components/pull/1436/files#diff-90ea253cb3ce7782845a01a0787e17c0R82

Enjoy 🙌