React Native Vector Icons Setup In MacOS For IOS Development

Vector icons are used in every part of a mobile application including buttons, links, labels, etc., Fortunately, the react-native-vector-icon package allows us to easily add icon and font libraries to our react native app.

When developing an app with React native, it takes extra steps to set up external packages for ios development, now let's see to how to configure our ios app in Xcode 14.1 to use react-native-vector-icons package.

Install react-native-vector-icons Package

npm install react-native-vector-icons

Install Pods

cd ios
pod install

Open Your React Native App With Xcode

Open your ios folder in react native application with XCode then,

• Create a fonts folder to add icon packages
• Copy Icons You want to use from node_modules/react-native-vector-icons
• Paste them to fonts folder in XCode

Configure Info.plist

The final step is to add a new key "Fonts provided by application" to the info.plist file in XCode and then add the icons as an item below that section as seen below. Include all the fonts you copied from the package, we just copied the Ionicons.

Use Icons In Your React Native App

Now you can use the icon packages you add to your application as component after restarting the app as in the code snippet below.

import React from "react"

import {SafeAreaView} from "react-native";

import Icon from "react-native-vector-icons/Ionicons";

const App = () => {
  return (
    <SafeAreaView>
      <Icon name="rocket" size={50} color="red"></Icon>
    </SafeAreaView>
  );
};

export default App;

Conclusion

That's all, in this article we have covered how to set up the react-native-vector-icons package for IOS development, which provides 3K+ icons to use in react native applications.

Thank you for reading