feat: properly implement currentColor (#2466)

# 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 |    ✅      |

src/fabric/AndroidSvgViewNativeComponent.ts

@@ -33,7 +33,6 @@ interface NativeProps extends ViewProps {
   vbHeight?: Float;
   align?: string;
   meetOrSlice?: Int32;
-  tintColor?: ColorValue;
   color?: ColorValue;
   pointerEvents?: string;
 

src/fabric/CircleNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/ClipPathNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/EllipseNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/ForeignObjectNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/GroupNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/IOSSvgViewNativeComponent.ts

@@ -22,7 +22,6 @@ interface NativeProps extends ViewProps {
   vbHeight?: Float;
   align?: string;
   meetOrSlice?: Int32;
-  tintColor?: ColorValue;
   color?: ColorValue;
   pointerEvents?: string;
   hitSlop?: UnsafeMixed<HitSlop | null | number | undefined>;

src/fabric/ImageNativeComponent.ts

@@ -45,6 +45,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/LineNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/MarkerNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/MaskNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/PathNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/PatternNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/RectNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/SymbolNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/TSpanNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/TextNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/TextPathNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/fabric/UseNativeComponent.ts

@@ -32,6 +32,7 @@ type ColorStruct = Readonly<{
 }>;
 
 interface SvgRenderableCommonProps {
+  color?: ColorValue;
   fill?: ColorStruct;
   fillOpacity?: WithDefault<Float, 1.0>;
   fillRule?: WithDefault<Int32, 1>;

src/lib/extract/extractProps.ts

@@ -6,6 +6,7 @@ import extractOpacity from './extractOpacity';
 import { idPattern } from '../util';
 import type {
   ClipProps,
+  ColorProps,
   extractedProps,
   FillProps,
   NumberProp,
@@ -57,6 +58,7 @@ export default function extractProps(
     ResponderProps &
     StrokeProps &
     FillProps &
+    ColorProps &
     ClipProps,
   ref: object
 ) {
@@ -84,6 +86,10 @@ export default function extractProps(
   extractFill(extracted, props, inherited);
   extractStroke(extracted, props, inherited);
 
+  if (props.color) {
+    extracted.color = props.color;
+  }
+
   if (inherited.length) {
     extracted.propList = inherited;
   }

src/lib/extract/types.ts

@@ -112,6 +112,10 @@ export interface FillProps {
   fillRule?: FillRule;
 }
 
+export interface ColorProps {
+  color?: ColorValue;
+}
+
 export interface ClipProps {
   clipRule?: FillRule;
   clipPath?: string;
@@ -259,7 +263,8 @@ export interface AccessibilityProps {
 
 // FIXME: This interface should probably be named CommonRenderableProps
 export interface CommonPathProps
-  extends FillProps,
+  extends ColorProps,
+    FillProps,
     StrokeProps,
     ClipProps,
     TransformProps,