zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-06 07:06:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: properly implement currentColor (#2466)

Browse Source 
# Summary

Motivated by issue #2455, I decided to implement the `currentColor`
property in line with the specs
(https://www.w3.org/TR/SVG11/color.html#ColorProperty). This involves
adding the `color` property to all renderable nodes.

## Test Plan

Example app -> `Test2455`

<img width="344" alt="image"
src="https://github.com/user-attachments/assets/ccaf5a79-4097-49f8-8948-0158d9d9274c">

```svg
<Svg color="red" width="60" height="60" viewBox="0 0 24 24" fill="none">
  <Path d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z" fill="currentColor"/>
  <G color="green" fill="purple">
    <G>
      <Rect x="16" y="16" width="8" height="8" fill="currentColor"/>
      <G color="pink">
        <Rect x="0" y="16" width="8" height="8" color="gold" fill="currentColor"/>
        <Circle cx="12" cy="20" r="4" fill="currentColor"/>
      </G>
    </G>
  </G>
</Svg>
```
## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅      |
| Android |    ✅      |
This commit is contained in:
Jakub Grzywacz
2024-09-30 15:50:37 +02:00
committed by GitHub
parent cd47aece7e
commit 9d9958264b
68 changed files with 166 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/test-examples/src/Test2455.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import {Button, Share, Text, TouchableOpacity, View} from 'react-native';
import {G, Path, Rect, Svg} from 'react-native-svg';
import {Circle, G, Path, Rect, Svg} from 'react-native-svg';
const Favorite = ({color}: {color: string}): JSX.Element => {
return (
@@ -9,10 +9,20 @@ const Favorite = ({color}: {color: string}): JSX.Element => {
d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z"
fill="currentColor"
/>
<G color={color === 'green' ? 'red' : 'green'} fill={'purple'}>
<Rect x="16" y="16" width="8" height="8" fill="currentColor" />
<G color="pink">
<Rect x="0" y="16" width="8" height="8" fill="currentColor" />
<G color={color === 'green' ? 'red' : 'green'} fill="purple">
<G>
<Rect x="16" y="16" width="8" height="8" fill="currentColor" />
<G color="pink">
<Rect
x="0"
y="16"
width="8"
height="8"
color="gold"
fill="currentColor"
/>
<Circle cx="12" cy="20" r="4" fill="currentColor" />
</G>
</G>
</G>
</Svg>