RithmIcon.tsx

import React, { useEffect } from "react";
import { View, StyleSheet, Animated, Easing } from "react-native";
import { Svg, Path, G } from "react-native-svg";

function RithmIcon({ width, height, fillColor }) {
  return (
    <View style={styles.logo}>
      <Svg width={width} height={height} viewBox="0 0 63 53">
        <G
          id="Page-1"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <Path
            d="M24.449219,26.511719 L32.839844,26.511719 C35.160156,26.511719 36.921875,25.988281 38.125,24.945312 C39.332031,23.902344 39.933594,22.394531 39.933594,20.425781 C39.933594,18.457031 39.332031,16.957031 38.125,15.929688 C36.921875,14.898438 35.160156,14.386719 32.839844,14.386719 L24.449219,14.386719 L24.449219,26.511719 Z M32.839844,28.882812 L24.449219,28.882812 L24.449219,41.542969 L21.90625,41.542969 L21.90625,12.015625 L32.882812,12.015625 C35.828125,12.015625 38.1875,12.765625 39.957031,14.273438 C41.726562,15.78125 42.613281,17.832031 42.613281,20.425781 C42.613281,22.574219 42,24.363281 40.78125,25.792969 C39.5625,27.226562 37.882812,28.152344 35.738281,28.570312 L41.988281,41.542969 L38.996094,41.542969 L32.839844,28.882812 Z"
            id="Shape"
            fill={fillColor}
          />
          <Path
            d="M48.601562,52.636719 L44.980469,52.636719 L44.980469,51.144531 L48.601562,51.144531 C55.394531,51.144531 56.539062,49.386719 56.539062,45.441406 L56.539062,33.417969 C56.539062,30.554688 56.820312,28.050781 59.8125,26.777344 C56.820312,25.507812 56.539062,23.003906 56.539062,20.140625 L56.539062,8.117188 C56.539062,4.171875 55.394531,2.414062 48.601562,2.414062 L44.980469,2.414062 L44.980469,0.921875 L48.601562,0.921875 C55.558594,0.921875 58.027344,2.804688 58.027344,8.117188 L58.027344,20.140625 C58.027344,23.566406 58.441406,25.25 62.21875,25.917969 L62.835938,26.027344 L62.835938,27.53125 L62.21875,27.640625 C58.441406,28.308594 58.027344,29.992188 58.027344,33.417969 L58.027344,45.441406 C58.027344,50.753906 55.558594,52.636719 48.601562,52.636719"
            id="Shape"
            fill={fillColor}
          />
          <Path
            d="M18.730469,52.636719 L15.109375,52.636719 C8.152344,52.636719 5.683594,50.753906 5.683594,45.441406 L5.683594,33.417969 C5.683594,29.992188 5.269531,28.308594 1.488281,27.640625 L0.875,27.53125 L0.875,26.027344 L1.488281,25.917969 C5.269531,25.25 5.683594,23.5625 5.683594,20.140625 L5.683594,8.117188 C5.683594,2.804688 8.152344,0.921875 15.109375,0.921875 L18.730469,0.921875 L18.730469,2.414062 L15.109375,2.414062 C8.320312,2.414062 7.171875,4.171875 7.171875,8.117188 L7.171875,20.140625 C7.171875,23.003906 6.890625,25.507812 3.898438,26.777344 C6.890625,28.050781 7.171875,30.554688 7.171875,33.417969 L7.171875,45.441406 C7.171875,49.386719 8.320312,51.144531 15.109375,51.144531 L18.730469,51.144531 L18.730469,52.636719 Z"
            id="Shape"
            fill={fillColor}
          />
        </G>
      </Svg>
    </View>
  );
}

const styles = StyleSheet.create({
  logo: {
    width: 15,
    height: 15,
    color: "#ffffff",
    justifyContent: "flex-start",
    alignItems: "center",
  },
});

export default RithmIcon;