❤Next Pizza's Mine

    npm

    Sign UpSign In

    zh-app-icons

    1.0.0 • Public • Published

    Vector Icons for React Native

    Travis npm npm

    Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.

    Table of Contents

    Bundled Icon Sets

    Browse all.

    Installation

    1. Run: $ npm install --save react-native-vector-icons
    2. For each platform (iOS/Android/Windows) you plan to use, follow one of the options for the corresponding platform.
    3. If you intend to use FontAwesome 5, check out this guide to get you started.

    iOS

    Option: Manually

    If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:

    • Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.
    • Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added. It will look something like this:

    XCode screenshot

    List of all available fonts to copy & paste in info.plist 
    <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>

    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, 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 font folder).
    Integrating library for getImageSource and ToolbarAndroid support

    These steps are optional and only needed if you want to use the Icon.getImageSource function or using custom icons in the Icon.ToolbarAndroid component.

    • 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()
    );
  }

}

    Note: If you're using React Native (Android) <= 0.17, follow this instructions

    Option: With rnpm

    $ react-native link

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

    OSX via react-native-desktop

    • Browse to node_modules/react-native-vector-icons and drag the folder Fonts to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create folder references" is checked.
    • Edit Info.plist and add a property called Application fonts resource path (or ATSApplicationFontsPath if Xcode won't autocomplete/not using Xcode) and type Fonts as the value.

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

    Windows via react-native-windows

    • Open your solution in Visual Studio, right click the Assets folder in your solution, click Add Existing.
    • Browse to the node_modules\react-native-vector-icons\Fonts folder, select the required font files
    • Click the Add drop-down and select Add as Link.
    • Set Copy To Output Directory property of each font file to Copy if newer

    Note: you need to recompile your project after adding new fonts.

    Web (with webpack)

    In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)

    {
  test: /\.ttf$/,
  loader: "url-loader", // or directly file-loader
  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},

    Then consume those files in your JavaScript entry point to get the bundled url and inject a style tag in your page:

    // Use prebuilt version of RNVI in dist folder
import Icon from 'react-native-vector-icons/dist/FontAwesome';

// Generate required css
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
  src: url(${iconFont});
  font-family: FontAwesome;
}`;

// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyles;
} else {
  style.appendChild(document.createTextNode(iconFontStyles));
}

// Inject stylesheet
document.head.appendChild(style);

    Upgrading

    Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to follow the steps outlined in the installation section.

    Icon Component

    You can either use one of the bundled icons above or roll your own custom font.

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

    Properties

    Any Text property and the following:

    Prop Description Default
    size Size of the icon, can also be passed as fontSize in the style object. 12
    name What icon to show, see Icon Explorer app or one of the links above. None
    color Color of the icon. Inherited

    Static Methods

    Prop Description
    getFontFamily Returns the font family that is currently used to retrieve icons as text. Usage: const fontFamily = Icon.getFontFamily()
    getImageSource Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
    getRawGlyphMap Returns the raw glyph map of the icon set. Usage: const glyphMap = Icon.getRawGlyphMap()
    hasIcon Checks if the name is valid in current icon set. Usage: const isNameValid = Icon.hasIcon(name)

    Styling

    Since Icon builds on top of the Text component, most style properties will work as expected, you might find it useful to play around with these:

    • backgroundColor
    • borderWidth
    • borderColor
    • borderRadius
    • padding
    • margin
    • color
    • fontSize

    NOTE: On android Text doesn't currently support border* styles, to circumvent this simply wrap your Icon with a View.

    By combining some of these you can create for example :

    type star

    Icon.Button Component

    A convenience component for creating buttons with an icon on the left side.

    import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

    buttons

    Properties

    Any Text, TouchableHighlight or TouchableWithoutFeedback property in addition to these:

    Prop Description Default
    color Text and icon color, use iconStyle or nest a Text component if you need different colors. white
    size Icon size. 20
    iconStyle Styles applied to the icon only, good for setting margins or a different color. Note: use iconStyle for margins or expect unstable behaviour. {marginRight: 10}
    backgroundColor Background color of the button. #007AFF
    borderRadius Border radius of the button, set to 0 to disable. 5
    onPress A function called when the button is pressed. None

    Usage as PNG image/source object

    Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size and color as described above.

    Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));

    For a complete example check out the TabBarExample project.

    Usage with TabBarIOS

    Simply use Icon.TabBarItemIOS instead of TabBarIOS.Item. This is an extended component that works exactly the same but with three additional properties:

    Prop Description Default
    iconName Name of the default icon (similar to TabBarIOS.Item icon) None
    selectedIconName Name of the selected icon (similar to TabBarIOS.Item selectedIcon). iconName
    iconSize Size of the icon. 30
    iconColor Color of the icon. None
    selectedIconColor Color of the selected icon. iconColor

    For example usage see Examples/TabBarExample or the examples section below. Don't forget to import and link to this project as described above if you are going to use the TabBar integration.

    Note: using iconColor and selectedIconColor requires the attribute renderAsOriginal to be set to true on Icon.TabBarItemIOS.

    Usage with NavigatorIOS

    Use Icon.getImageSource to get an image source object and pass it as you would with backButtonIcon, leftButtonIcon or rightButtonIcon.

    Note: Since NavigatorIOS doesn't rerender with new state and the async nature of getImageSource you must not use it with initialRoute until the icon is rendered, but any view added by push should be fine. Easiest way is to simple add an if statment at the beginning of you render method like this:

      render() {
    if (!this.state.myIcon) {
      return false;
    }
    return (<NavigatorIOS ... />);
  }

    Facebook writes:

    Development belongs to open-source community - not used by the React Native team on their apps. A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.

    You are probably better off with Navigator.NavigationBar or react-native-navbar.

    Usage with ToolbarAndroid

    Simply use Icon.ToolbarAndroid instead of React.ToolbarAndroid, this is composition of the underlying ToolbarAndroid component that works the same but any *icon property also takes *iconName:

    Prop Description Default
    logoName Name of the navigation logo icon (similar to ToolbarAndroid logo) None
    navIconName Name of the navigation icon (similar to ToolbarAndroid navIcon) None
    overflowIconName Name of the overflow icon (similar to ToolbarAndroid overflowIcon). none
    actions Possible actions on the toolbar as part of the action menu, takes the additional arguments iconName, iconColor and iconSize. none
    iconSize Size of the icons. 24
    iconColor Color of the icons. black

    For example usage see Examples/IconExplorer/index.android.jsor the examples section below. Don't forget to import and link to this project as described above if you are going to use the ToolbarAndroid integration.

    Multi-style fonts

    Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard Icon component:

    import Icon from 'react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to regular
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // Only in FA5 Pro

    Static methods

    All static methods from Icon is supported by multi-styled fonts.

    Prop Description
    getFontFamily Returns the font family that is currently used to retrieve icons as text. Usage: const fontFamily = Icon.getFontFamily(style)
    getImageSource Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color, style)
    getRawGlyphMap Returns the raw glyph map of the icon set. Usage: const glyphMap = Icon.getRawGlyphMap(style)
    hasIcon Checks if the name is valid in current icon set. Usage: const isNameValid = Icon.hasIcon(name, style)
    getStyledIconSet Use this to get a Icon component for a single style. Usage. const StyledIcon = Icon.getStyledIconSet(style)

    If no style argument is passed (or if it's invalid) the methods will default to a pre-defineds fallback.

    Components

    Icon.Button, Icon.TabBarItem, Icon.TabBarItemIOS, Icon.ToolbarAndroid are all supported, usage is just like Icon:

    import Icon from 'react-native-vector-icons/FontAwesome5';
const myButton = (
  <Icon.Button name="facebook" onPress={this.loginWithFacebook} solid>
    Login with Facebook
  </Icon.Button>
);

    Custom Fonts

    createIconSet(glyphMap, fontFamily[, fontFile])

    Returns your own custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or it's character code. fontFamily is the name of the font NOT the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third fontFile argument for android support, it should be the custom font file name.

    import { createIconSet } from 'react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');

    createIconSetFromFontello(config[, fontFamily[, fontFile]])

    Convenience method to create a custom font based on a fontello config file. Don't forget to import the font as described above and drop the config.json somewhere convenient in your project.

    import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

    createIconSetFromIcoMoon(config[, fontFamily[, fontFile]]) 

    import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'LineAwesome',
  'line-awesome.ttf'
);

    Make sure you're using the Download option in IcoMoon, and use the .json file that's included in the .zip you've downloaded. You'll also need to import the .ttf font file into your project, following the instructions above.

    createMultiStyleIconSet(styles [, options]) 

    import { createMultiStyleIconSet } from 'react-native-vector-icons';

/*
 * This is just example code, you are free to
 * design your glyphmap and styles to your liking
 */

import glyphmap from './glyphmap.json';
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object.keys(glyphmap); /* ["style1", "style2"] */
const options = {
  defaultStyle: 'style1',
  glyphValidator: (name, style) => glyphKeys.indexOf(name) !== -1,
  fallbackFamily: (name) => {
    for (let i = 0; i < glyphKeys.length; i++) {
      const style = glyphKeys[i];
      if (glyphmap[style].indexOf(name) !== -1) {
        return style;
      }
    }

    /* Always return some family */
    return glyphKeys[0];
  }
};

/*
 * The styles object consits of keys, which will be
 * used as the styles later, and objects which are
 * used as style objects for the font. The style
 * should have unique characteristics for each font
 * in order to ensure that the right one will be
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0 in order to diffirentiate the styles but
 * other properties (like fontFamily) can be used.
 * It's just a standard RN style object.
 */
const styles = {
  style1: {
    fontWeight: '700'
  },
  style2: {
    fontWeight: '100'
  }
};

const Icon = createMultiStyleIconSet(styles, options);

/* Uses default style (style1) */
<Icon name={'hello'} />
<Icon name={'world'} style1 />
/* Default style is style1 but this will fall back to style2 */
<Icon name={'foo'} />
/* This will also fall back to style2 */
<Icon name={'foo'} style1 />
/* Regular use of style2 */
<Icon name={'bar'} style2 />
    option Description default
    defaultStyle The name of the style to be used if no style is supplied during rendering. Object.keys(styles)[0]
    fallbackFamily Function for selecting a family if a glyph is not available. The function should accept the name of the glyph as a parameter. Returns the name if the family. (name) => Object.keys(styles)[0]
    glyphValidator Function for validating that a glyph is available for a chosen style. It has name and style as parameters, in that order. Returns true if the glyph is valid or false if it's not. (name, style) => true

    iOS

    You have to manually make a reference of your .ttf on your xcodeproj Resources folder and in Info.plist.

    Animation

    React Native comes with an amazing animation library called Animated. To use it with an icon, simply create an animated component with this line: const AnimatedIcon = Animated.createAnimatedComponent(Icon). You can also use the higher level animation library react-native-animatable.

    Examples

    IconExplorer

    Try the IconExplorer project in Examples/IconExplorer folder, there you can also search for any icon.

    Screenshot of IconExplorer

    Basic Example

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

function ExampleView(props) {
  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}

    TabBarIOS

    Full example in TabBarExample project in Examples/TabBarExample folder.

    import { View, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

function TabBarView(props) {
  return (
    <TabBarIOS>
      <Icon.TabBarItem
        title="Home"
        iconName="ios-home-outline"
        selectedIconName="ios-home"
      >
        <View style={styles.tabContent}>
          <Text>Home Tab</Text>
        </View>
      </Icon.TabBarItem>
    </TabBarIOS>
  );
}

    ToolbarAndroid

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

function ToolbarView(props) {
  return (
    <Icon.ToolbarAndroid
      title="Home"
      titleColor="white"
      navIconName="md-arrow-back"
      onIconClicked={props.navigator.pop}
      actions={[
        {
          title: 'Settings',
          iconName: 'md-settings',
          iconSize: 30,
          show: 'always',
        },
        {
          title: 'Follow me on Twitter',
          iconName: 'logo-twitter',
          iconColor: '#4099FF',
          show: 'ifRoom',
        },
      ]}
      overflowIconName="md-more"
    />
  );
}

    Inline Icons

    import { Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

function ExampleView(props) {
  return (
    <Text>
      Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
    </Text>
  );
}

    Community examples

    Generating your own icon set from a CSS file

    If you already have a icon font with associated CSS file then you can easily generate a icon set with the generate-icon script.

    Example usage:

    ./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js

    Options

    Any flags not listed below, like --componentName and --fontFamily, will be passed on to the template.

    -p, --prefix

    CSS selector prefix [default: ".icon-"]

    -t, --template

    Template in lodash format [default: "./template/iconSet.tpl"]

    For default template please provide --componentName and --fontFamily.

    -o, --output

    Save output to file, defaults to STDOUT

    Changelog

    Troubleshooting

    The icons show up as a crossed out box on Android

    • Make sure you've copied the font to android/app/src/main/assets/fonts.
    • Delete the build folder with rm -rf android/app/build.
    • Recompile the project.

    Red screen with "Unrecognized font family" error on iOS

    • Make sure you've added manually the reference of your .ttf on your xcodeproj Resources folder.
    • Check that the font you are trying to use appears in Info.plist, if you've added the whole folder and it's blue in color, then you need to add it to the path.
    • Check that the font is copied in the Copy Bundle Resources in Build Phases.
    • Delete the build folder with rm -rf ios/build
    • Recompile the project.

    Android build fails on Windows for no good reason

    Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including Execution failed for task ':react-native-vector-icons:processReleaseResources'. So try to keep the path to your project folder as short as possible.

    Wrong icons are shown after upgrading this package

    You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the gradle approach.

    Some icons are missing after upgrading this package

    Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a custom font.

    License

    This project is licenced under the MIT License.

    Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.

    Keywords

    Install

    npm i zh-app-icons

    Repository

    Gitgithub.com/oblador/react-native-vector-icons

    Homepage

    github.com/oblador/react-native-vector-icons

    DownloadsWeekly Downloads

    8

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    7.34 MB

    Total Files

    1422

    Last publish

    Collaborators

    • edison.fe.html
    Try on RunKit
    Report malware