How do I add a FontAwesome icon in expo

user_10907282 0
Viewed 6060

I'd like to include font awesome icons in my app.

I'm using expo to buil a native app.

The documentation states I don't need to install font awesome, but I do need to import as well as get the syntax right.

Any help would be greatly appreciated.

import { FontAwesome } from '@expo/vector-icons';

<TabBarIcon
  focused={focused}
  name={Platform.OS === 'ios' ? 'fa-newspaper-o' : 'md-link'}
 />

I'm doing something wrong as the icon is not showing up.

font-awesome expo react-native
2 Answers

You should use it like this

import { FontAwesome } from '@expo/vector-icons';

...

<FontAwesome name={'newspaper-o'} />

It needs to be wrapped in its own named component.

You should also make sure that you use the correct name as per the directory https://expo.github.io/vector-icons/

fa-newspaper-o isn't the correct name it should be newspaper-o

Also md-link is an Ionicons icon, using that in a FontAwesome component will cause a warning and it won't work.

user_55081750

In my case I was trying to use Font Awesome 5 Icons with just font awesome, I had to use

import { FontAwesome5 } from '@expo/vector-icons';
<FontAwesome5 name={iconName} />
user_43333820
Related