How to add downloaded fontawesome pro icons to react native?

Question

I am no longer a fontawesome pro customer but I still am able to download the pro icon set for web and desktop (svg / css / webfonts / sprites...) and I want to add some duotone and light pro icons to my project. But I've tried to add it to my expo project in multiple ways and it does not seem to work.

• I tried using react-native-svg and it didn't work as fontawesome svg can't be translated to svgr for some reason.

• I tried using react-native-fontawesome but it only seems to work for regular solid and brands icons.

• I can't use the fortAwesome library as my npm token has expired and therefore been revoked.

Please help, how can I use the downloaded icons in my react native expo project ? Thank you in advance

Answer 1

I found out how to do it.

I added the fontawesome pro fonts to my assets. Loaded the fonts using Font.loadAsync().

Then I created a component and an array containing the names and the unicode values of each icon. (found at this link : font-awesome unicode and names

My component is simply a component with a fontFamily corresponding to the fontFamily I want to use (in my case the fa-light-300, fa-duotone-900 and fa-brands-400). And the unicode value written like so :

<Text style={{ fontFamily: "fa-light-300" }}>{"\uf164"}</Text>

I hope this helps if anyone comes across the same problem.