react-native-dynamic-vector-icons

Installation

Add the dependency:

Pure React Native:

npm i react-native-dynamic-vector-icons
npm i react-native-vector-icons
# iOS Only
npx pod-install

Expo Version:

"react-native-dynamic-vector-icons": "WrathChaos/react-native-dynamic-vector-icons#expo"

Peer Dependencies

IMPORTANT! You need install them.

"react-native-vector-icons": ">= 6.x.x"

Import

import Icon, { IconType } from "react-native-dynamic-vector-icons";

Basic Usage

<Icon
  name="github"
  type={IconType.AntDesign}
  size={30}
  color="purple"
  onPress={() => {}}
/>

Bundled Icon Sets

Browse all.

• AntDesign by AntFinance (297 icons)
• Entypo by Daniel Bruce (411 icons)
• EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
• Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)
• FontAwesome by Dave Gandy (v4.7.0, 675 icons)
• FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)
• Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)
• Foundation by ZURB, Inc. (v3.0, 283 icons)
• Ionicons by Ben Sperry (v4.2.4, 696 icons)
• MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
• MaterialCommunityIcons by MaterialDesignIcons.com (v4.0.96, 4416 icons)
• Octicons by Github, Inc. (v8.4.1, 184 icons)
• Zocial by Sam Collins (v1.0, 100 icons)
• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

Installation for iOS and Android

List of all available fonts to copy & paste in info.plist (Most Stable)

<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>
  <string>Fontisto.ttf</string>
</array>

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

If you want to use the TabBar/NavigatorIOS integration or use getImageSource/getImageSourceSync, then you need to add RNVectorIcons.xcodeproj to Libraries and add libRNVectorIcons.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Option: With react-native link

$ react-native link react-native-vector-icons

Note: Some users are having trouble using this method, try one of the others if you are too.

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

Edit Info.plist as described above.

If you are using use_frameworks! in your Podfile you instead need to dynamically load the icon font by doing Icon.loadFont() when boostrapping your application.

Note: You must be consuming React itself via CocoaPods for this to work, see React Native documentation on how to set that up.

Android

Option: With Gradle (recommended)

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

To customize the files being copied, add the following instead:

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Option: Manually

• Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase fonts folder).

Integrating library for getImageSource support

These steps are optional and only needed if you want to use the Icon.getImageSource function.

• Edit android/settings.gradle to look like this (without the +):

  rootProject.name = 'MyApp'
  
  include ':app'
  
  + include ':react-native-vector-icons'
  + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
  

• Edit android/app/build.gradle (note: app folder) to look like this:

  apply plugin: 'com.android.application'
  
  android {
    ...
  }
  
  dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
  + compile project(':react-native-vector-icons')
  }
  

• Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

  package com.myapp;
  
  + import com.oblador.vectoricons.VectorIconsPackage;
  
  ....
  
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage()
  +   , new VectorIconsPackage()
      );
    }
  
  }
  

Configuration - Props

Property	Type	Default	Description
style	style	style	use this to change the Icon's style
name	string	null	use this to change icon's itself
type	IconType	null	set the icon's type
size	number	null	changes the icon's size
color	color	null	use this to change icon's color
onPress	function	undefined	use this to set the icon's onPress functionality

Credits

Special thanks to oblador, react-native-vector-icons to make a great icon library :) This library is a little wrapper for react-native-vector-icons to make their icon type dynamically.

Author

FreakyCoder, [e-mail]

License

React Native Dynamic Vector Icons Library is available under the MIT license. See the LICENSE file for more info. )