Files
Jakub Grzywacz 2a58016ec1 feat: get currentColor from caller instead of parent (#2521)
# Summary

Fixes #2520
When an element uses `currentColor`, it should look for color in its
caller, not in its parent.
Example: 
```svg
<Svg width="100" height="100" viewBox="0 0 100 100" color="red">
  <Defs color="blue">
    <G color="green">
      <Rect id="a" x="0" y="0" width="50" height="50" fill="currentColor"/>
    </G>
  </Defs>
  <G color="pink">
    <Use href="#a"/>												<!-- #1 -->
  </G>
  <Use href="#a" transform="translate(25 25)"/>						<!-- #2 -->
  <G color="green">
    <Use href="#a" transform="translate(50 50)"/>					<!-- #3 -->
  </G>
</Svg>
```

* `#1` should be **pink**
* `#2` should be **red**
* `#3` should be **green**


![image](https://github.com/user-attachments/assets/b7ba2ec6-ea05-4bcb-9f40-0cf024e5c749)

## Test Plan

Example app -> test -> Test2520

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |          |
| Android |          |
2024-10-31 16:00:36 +01:00

33 lines
846 B
TypeScript

import React from 'react';
import {View} from 'react-native';
import {Defs, G, Rect, Svg, Use} from 'react-native-svg';
export default () => {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Svg width="100" height="100" viewBox="0 0 100 100" color="red">
{/* @ts-ignore */}
<Defs color="blue">
<G color="green">
<Rect
id="a"
x="0"
y="0"
width="50"
height="50"
fill="currentColor"
/>
</G>
</Defs>
<G color="pink">
<Use href="#a" />
</G>
<Use href="#a" transform="translate(25 25)" />
<G color="green">
<Use href="#a" transform="translate(50 50)" />
</G>
</Svg>
</View>
);
};