How to use different fonts (more than one) of react-native-vector-icons in one file?

Question

How to use 2 or more fonts (for example, FontAwesome and Entypo) of the react-native-vector-icons in one file?

score 10 · Answer 1 · answered Aug 04 '17 at 03:36

react-native-vector-icons exports a default <Icon /> component. You can name your default imports anything you want. For your example you can do:

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import EntypoIcon from 'react-native-vector-icons/Entypo'

This way you can use as many fonts as you want

score 0 · Answer 2 · answered Aug 03 '17 at 16:23

0

Instead of this (working for 1 font per file):

Importing:

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

Using:

<Icon name="search" size={20} />

Do this (for 2 or more fonts per file):

Importing:

import { FontAwesome, Entypo } from 'react-native-vector-icons';

Using:

<FontAwesome name="search" size={20} />
<Entypo name="add-user" size={20} />

answered Aug 03 '17 at 16:23

Eduard

This won't work as the library doesn't export the fonts that way. – Kyle Roach Aug 04 '17 at 03:31
Here's the exact link from the creator himself https://github.com/oblador/react-native-vector-icons/issues/111#issuecomment-183906528 – Kyle Roach Aug 04 '17 at 13:48
and yet it works. Sorry, not going to respond anymore, since I find this chat meaningless. If it does not work in your project - don't use. It works in mine - I will be sticking with it as long as it does. Cheers! – Eduard Aug 04 '17 at 16:26
@KyleRoach The library absolutely does export this way. Test it and you will see. It does both default exports if you specify 'react-native-vector-icons' together with the family name, like you did in your answer, and it does named exports if you just specify 'react-native-vector-icons'. So this answer is perfectly legitimate and does not deserve a downvote. +1 – BruceHill Feb 11 '22 at 09:34

2 Answers2