Search code examples
react-nativefont-awesomereact-native-vector-icons

vector-icons/FontAwesome5 showing wrong icon on react-native


On ReactJS I can show the icon by using it's name taken from this website: https://fontawesome.com/icons?d=gallery&q=eye&m=free

As you can see, if you search by eye, you'll have a lot of options there, and if you click on the icon it will show you what name you should use to call that icon. For example: fas fa-eye will render a solid eye and far fa-eye will render a regular eye.

The problem is that on react-native I can't call the icon name like this, it won't accept, so I have to just use the word eye, but this limits me by a random eye that's not from my choice. So I wanna know if there's any way that I can pick the icon that I want just like in ReactJS? This is how I'm currently using the fontawesome icons on react-native:

import FontAwesome from 'react-native-vector-icons/FontAwesome5';

...

return <FontAwesome name={'eye} style={props.customStyle} />


The showed icon appears on the website's list, but as I said, there's more than one icon with the same name and I want be able to choose bettween then.


Solution

  • For those that are struggling into this problem, just add the solid or light tag into your component and it will change the icon, example:

    return <FontAwesome name={'eye'} style={props.customStyle} solid />