React navigation (Tab Navigator) with custom SVGIcons

I'm using React navigation to change screens with the bottom tab navigations, but when I try to use a custom SVG I have many troubles and using an image to show as an icon the color obviously doesn't change, how can I use an SVG file that can recognize the color im passing to change when I'm on the page?

function MyTabs() {
  return(
    <Tab.Navigator
    tabBarOptions={{
      showLabel: false,
      style:{
        backgroundColor:'#313A3F',
        borderTopColor: 'transparent'
      },
      activeTintColor: '#E6B056',
    }}
    >
      <Tab.Screen 
      name="ProfileScreen" 
      component={ProfileScreen} 
      options={{
        tabBarIcon: ({color}) => (
          <Ionicons name="person" size={32} color={color} />
        )
      }}
      />
      <Tab.Screen 
      name="MatchScreen" 
      component={MatchScreen} 
      options={{
        tabBarIcon: ({color}) => (
            <Image
              style={{ width: 38, height: 38 }}
              source={require('../images/Icons/ico-menu-busca-evas.png')}
            />
          )
      }}
      />
      <Tab.Screen 
      name="CheckIn" 
      component={CheckIn} 
      options={{
        tabBarIcon: ({color}) => (
        <FontAwesome5  name="map-marker" size={32} color={color} />
        )
      }}
      />
      <Tab.Screen name="ChatScreen"
      component={ChatScreen} 
      options={{
        tabBarIcon: ({color}) => (
        <Ionicons name="chatbubbles" size={32} color={color} />
        )
      }}
      />
    </Tab.Navigator>
  )
}