No app nowadays is complete without iconography. In order to add icons to our app we will use react-native-vector-icons.

If you just want to integrate the icons, the instructions on the README are quite straightforward, however, if you also want to integrate other fonts in your app it gets a little bit more complicated.

The easy way of adding icons#

The react-native-vector icons README illustrates a simple way to add the fonts to a macOS app, once you have added the dependency you can just follow the instructions.

Browse to node_modules/react-native-vector-icons and drag the folder Fonts to your project in XCode. Make sure your app is checked under "Add to targets" and that "Create folder references" is checked.

Edit Info.plist and add a property called "Application fonts resource path" (or ATSApplicationFontsPath if XCode won't autocomplete, or you're not using XCode) and type "Fonts" as the value.

The problem with this approach is that we can only link one folder for your font files, and that means that once we follow this approach (symbolic linking directly to the node_modules folder) then we won't be able to add other custom fonts to our app. Therefore we will manually create the folders and individually link our fonts.

1. Add the vector icons dependency#

Let's start by adding the vector icons dependency to our project:

yarn add react-native-vector-icons

This package does not come with integrated type definitions, so we will install them separately:

yarn add --dev @types/react-native-vector-icons

2. Open the .xcworkspace in Xcode#

We are going to open the .xcworkspace file from the macos folder in XCode (you can just double-click it). The .xcworkspace is a wrapper for our app's XCode project but it also adds all the Cocoapods dependencies.

3. Create the necessary folders and files#

In your terminal (or in Finder), navigate to your app root folder and then to the macos folder, and once inside, go to the [project name]-macOS folder, and there create a Fonts folder. Inside that you are going to put all your font files. We will start by copying the vector-icons fonts.

Copy the font files via Finder - on the root of the folder navigate to the node_modules/react-native-vector-icons/Fonts folder, then copy and paste all the files inside of that folder into our macos/[project_name]-macos/Fonts folder. You could also do this via the command line, with something similar to this: