Setting up React Native Vector Icons for IOS

Icons tell more than plenty of words do. That’s why they are widely used in mobile applications where design really matters. React Native Vector Icons is a great package offering a large variety of handy icons for mobile apps. This article will explain how we set up and use vector icons in React Native apps.

Photo by Harpal Singh on Unsplash

First of all always remember to see the official document for React Native Icons. This article will guide you specifically for IOS, and in an simple way that everybody can follow easily.

Step-1: Installing the package

Add a new terminal in VS Code and type one of the following codes according to your choice between npm or yarn.

$npm i react-native-vector-icons
or
$yarn add react-native-vector-icons

After the installation, it is better to check the package.json file if the react-native-vector-icons package is installed successfully.

See the dependencies section

Step-2: Copying font files to Xcode

Open Xcode by opening the file in the following path:

project-name-folder/ios/project-name.xworkspace

…or you can just start the Xcode and open your project folder.

Open a project or file

Now, right click on the folder with the project name (in the example below the project name is workspace) and choose ‘New Group’. Then rename the file you’ve just created as ‘Fonts’.

Open your main project folder and go through node_modules/react-native-vector-icons/Fonts. You will see the listed fonts as in the screenshot below.

From the list of .ttf files drag and drop the vector icon fonts of your choice(s) to the Fonts folder you created at Xcode. It’s wise to decide on the icons to use before, and upload just the font families including those icons. You can find the list of icons in the react native vector icons directory.

Once you drag the selected font files, make sure that ‘Copy items if needed’ and ‘Create folder references’ alternatives are selected. Then click ‘Finish’.

Adding font files to Xcode

Step-3: Setting up the Xcode

Find and click on the ‘Info.plist’ file under the project-name folder. Then click the ‘+’ button on the top row (Information Property List) and choose ‘Add row’ from the list. Rename the created row as ‘Fonts provided by application’. It should be an auto-completed text, but no worries if it is not.

Add a row -> Fonts provided by application

Click on the + button next to the ‘Fonts provided by application’ row and create as many items as the number of fonts you wish to use in the app. Write the full name of the font file (i.e. MaterialCommunityIcons.ttf) to the value section of each item.

Writing the name of the font file to value section

Step-4: Pod Installing

Now it’s time to update the pod. From the bash terminal in VS Code, run the following codes:

$cd ios
$pod update
$cd ..

Go back to Xcode. From the menu bar above, select ‘Product’ > ‘Clean Build Folder’ then Run the app.

Clean Build Folder and Run

Step-4: Use the Icons

Pick the name of the icon from the icons directory.

Name of the icon

Then use it as shown in the code below.

An example use of the vector-icons

You can see many more options for using vector icons in the document.

Step-6: Enjoy the icons

Thanks for reading. You might want to check Clarusway blog pages for more informational articles.