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