React Native Custom Icons w/ Vector Icons

Question

I'm new to React Native and I'm trying to have icons that are able to have their color changed based on json data received. I've been able to use React Native Vector Icons . However, I have my own icons that I would like to use. On the linked repo page there is something that talks about generating your own icons, but I'm not familiar enough to know how it is supposed to work. My icons are .png files and I'd like to make them so I can give them a color attribute on the fly in my app. I wanted to see what the process was to be able to do that if it was even possible. Can I use the process described in the repo?

Thanks in advance!

Answer 1

So, to create your own icon component, this could be a simple representation:

import React from 'react'
import { View, Image } from 'react-native'

export default class Example extends React.Component{

  renderIcon = (iconName, color) => {
    iconName = this.props.iconName
    color = this.props.color
    return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
  }

  render(){
    return(
      <View>
        {this._renderIcon}
      </View>
    )
  }
}

For example, your .png Icon is called IconHomeFocused , and it's an icon of the home icon when it's focused...then you would put, in your component that you want your Icon to be in: <Example iconName = 'IconHome' color = 'Focused'/> . Of course, this requires you to name your icons carefully. I didn't want to write a million if statements so this seemed like the easiest sort of integration for me. I'm sure there are much better interpretations out there though. Good luck.