To this,Ĭlick on the right hand side of Item 0 on the dropdown you just clicked on xcode Then start copying the names of the icons and adding them. To get a list of the icons, goto yourApp /node_modules /react -native -vector -icons /Fonts Now we are going to add all our icons here one after the other. Click on the drop down icon and you should see a key value pair input created initially as " item 0" like this When you click enter, it'll be created and you'll see a dropdown icon on it. An input will come up, type in " Fonts provided by application", it should auto-complete as you type. it'll open a window on the right hand side, look for this " Information property List", hover on it or click on it until you see a plus icon (+) like thisĬlick on the plus icon. Still on xcode, at the same directory level as the Fonts group you just created, you'll see a file called " ist" or " info"" (if abbreviated by xcode), click it. You should now see all the fonts in the Fonts Group you created. Now keep your xcode and Fonts folder side by side and drag the selected fonts from there to the "Fonts" group you created in your project's xcode.Ī screen will pop up like this, Ensure that "Copy items if needed" and " Create folder references" is ticked. You'll see some fonts there ending with ".ttf". On xcode, right click on the name of your project and click on "New Group" to create a groupĪfter this, go to your project's " node modules folder" from Mac Finder, look for and open " react-native-vector-icons", then open the " Fonts" folder there. I usually do that from the root of my project using The next thing is to open your project in xcode. After installing react-native-vector-icons.While android is a bit straight forward, the same is not for ios which is a bit tricky. P.S : You can only do this set up on an apple Mac book PC. Let's add another one from another icon family called "Entypo" import Entypo from 'react-native-vector-icons/Entypo' Finally we use a font from AntDesign like so. Let's import AntDesign import AntDesign from 'react-native-vector-icons/AntDesign' First import your desired icon family (You can find all the icons directory here ).To test our icons, go to any page of your app and do the following Then rebuild your android project with yarn android Or if you prefer yarn □ yarn add react -native -vector -iconsĪfter installation, go to android /app /adleĪnd add this line of code apply from: "././node_modules/react-native-vector-icons/adle" Next we install a package called react-native-vector-iconsĪt the root of your project in terminal, type this npm install -save react -native -vector -icons In this article, I will walk you through a step by step guide on how to set up vector icons on your android and ios React Native projects.įirst we set up a React Native project called todoApp. Whether on the web or on mobile platforms, icons play a necessary role in passing information to users.
0 Comments
Leave a Reply. |