DEV Community

Nguyễn Hữu Hiếu
Nguyễn Hữu Hiếu

Posted on

react-native: install react-native-vector-icons

Version 

"react-native-vector-icons": "^9.1.0", "@types/react-native-vector-icons": "^6.4.10", "react-native": "0.68.2",
Enter fullscreen mode Exit fullscreen mode

Install react-native-vector-icons 

yarn add react-native-vector-icons # if use typescript yarn add @types/react-native-vector-icons -D # install on ios cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

Config for IOS

  • Autolink from react-navive > v6.0 => no need to run react-native link anymore
  • Autolink will auto copy resource (file .ttf) => no need to copy resource file anymore
  • Add this meta-data to info.list 
<key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialIcons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Octicons.ttf</string> <string>Zocial.ttf</string> </array>
Enter fullscreen mode Exit fullscreen mode

Config for Android

  • Open file android/app/build.gradle not file android/build.gradle

  • Add Config

apply plugin: "com.android.application" apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" // <-- this line
Enter fullscreen mode Exit fullscreen mode

Check 

import Icon from 'react-native-vector-icons/FontAwesome'; const myIcon = <Icon name="rocket" size={30} color="#900" />;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)