react-native-vector-icons - Amazon Vega Docs

The @amazon-devices/react-native-vector-icons library provides support on Vega for react-native-vector-icons. The library provides customizable vector icons ideal for embellishing buttons, logos, and navigation or tab bars that seamlessly integrate into your projects. Their versatility makes extension and styling effortless. This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is deployed as an autolinking library, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it’s built. When you uplevel your app’s version of React Native for Vega, consider the best practice of upleveling its library dependencies. For more information about this library and its API, see the README.md in the GitHub repo.

Installation

Add this JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

"dependencies": {
   ...
   "@amazon-devices/react-native-vector-icons": "~2.0.0"
}

"dependencies": {
   ...
   "@amazon-devices/react-native-vector-icons": "~2.1.1"
}

Reinstall the dependencies using the npm install command.
Add your font files to <app_package_root>/assets/fonts.

Upgrading

Upgrade the font files linked to your projects when you upgrade this package. If the automatic linking works for you, running it again should update the fonts. Otherwise, follow the steps outlined in the installation section.

Examples

IconExplorer

Try the IconExplorer project in packages/icon-explorer in the GitHub react-native-vector-icons repo. There you can also search for any icon. Screenshot of IconExplorer that shows a list of Iconsets, Buttons, and Styling options.

Basic Example

A basic example of returning an icon:

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

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

TabBar

The following following example shows how to implement a TabBar. The folloing example taken from react-navigation:

import { createBottomTabNavigator } from '@amazon-devices/react-navigation/bottom-tabs';
import MaterialCommunityIcons from '@amazon-devices/react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

<Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        activeTintColor: '#e91e63',
      }}
    >

<Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />

<Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />

<Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
</Tab.Navigator>
  );
}

API support

Icon Component

Either use one of the icons that comes with the library (the following example uses the icon from FontAwesome.js) or create your own custom font.

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

Properties

Use any Text property and the following props:

Prop	Description	Default
`size`	You can also use `fontSize` to to adjust size in the style object.	`12`
`name`	The name of the icon you want to show.	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 resolves to the source of a bitmap version of the icon for use with `Image` component. Usage: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(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

Icon builds on top of the Text component, therefore most style properties work as expected. Try these properties:

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

By combining some of these props, you can create these icons:

type star

Icon.Button Component

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

import Icon from '@amazon-devices/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>
);

Screenshot that shows some Facebook, Twitter, and GitHub buttons.

Properties

You can use Text, TouchableHighlight, or the TouchableWithoutFeedback property, as well as the following properties.

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 are good for setting margins or a different color. Note: use `iconStyle` for margins or expect unstable behavior.	`{marginRight: 10}`
`backgroundColor`	Background color of the button.	`#007AFF`
`borderRadius`	Border radius of the button. Set to `0` to disable.	`5`
`onPress`	The function called when a button is pressed.	None

Usage as PNG image/source object

Use with other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size, and color as described previously.

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

Alternatively you may use the synchronous method Icon.getImageSourceSync to avoid rendering glitches. Keep in mind that this method is blocking and might incur performance penalties. Subsequent calls will use cache however.

Multistyle fonts

The react-native-vector-icons library supports multistyle fonts like FontAwesome 5. The usage is similar to the standard Icon component:

import Icon from '@amazon-devices/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 are supported by multistyled 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 resolves to the location of a bitmap version (of the icon specified) by the `name` parameter. Use this prop to retrieve the icon location so that you can display with components, such as `Image`, to display the icon. Usage: `const source = await Icon.getImageSource(name, size, color)`
`getImageSourceSync`	Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)`
`getRawGlyphMap`	Returns the raw glyph map of the icon set. Usage: `const glyphMap = Icon.getRawGlyphMap(style)`
`hasIcon`	Checks if the name is valid in the current icon set. Usage: `const isNameValid = Icon.hasIcon(name, style)`
`getStyledIconSet`	Gets an `Icon` component for a single style. Usage. `const StyledIcon = Icon.getStyledIconSet(style)`

If no style argument is passed, or if it’s not valid, the methods default to a predefined fallback.

Components

Icon.Button is supported. The usage is just like Icon:

import Icon from '@amazon-devices/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. The key is the icon name and the value is either a UTF-8 character or its character code. The name of the font is fontFamily, however this is not the name of the filename. Open the font in Font Book.app or similar to learn the name.

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

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

You can create a custom font based on a fontello config file. Don’t forget to import the font as described previously and place the config.json somewhere convenient in your project.

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

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

import { createIconSetFromIcoMoon } from '@amazon-devices/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 the .json file that’s included in the .zip you downloaded. Import the .ttf font file into your project, following the previous instructions.

createMultiStyleIconSet(styles [, options])

import { createMultiStyleIconSet } from '@amazon-devices/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 consists 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 of the family.	`(name) => Object.keys(styles)[0]`
`glyphValidator`	Function for validating glyph availability for a chosen style. The function 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`

Animation

React Native comes with an animation library called Animated. To use it with an icon, create an animated component with this code: const AnimatedIcon = Animated.createAnimatedComponent(Icon).

Supported versions

NPM package version	Vega SDK version	Vega OS version	React Native version
~2.0.0	0.23 and earlier	`OS 1.1 (1401010009820)` and earlier	0.72
~2.1.1	0.24	`OS 1.2 (2101020054720)`	0.83

​Installation

​Upgrading

​Examples

​IconExplorer

​Basic Example

​TabBar

​API support

​Icon Component

​Properties

​Static Methods

​Styling

​Icon.Button Component

​Properties

​Usage as PNG image/source object

​Multistyle fonts

​Static methods

​Components

​Custom Fonts

​createIconSet(glyphMap, fontFamily[, fontFile])

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

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

​createMultiStyleIconSet(styles [, options])

​Animation

​Supported versions

Installation

Upgrading

Examples

IconExplorer

Basic Example

TabBar

API support

Icon Component

Properties

Static Methods

Styling

Icon.Button Component

Properties

Usage as PNG image/source object

Multistyle fonts

Static methods

Components

Custom Fonts

createIconSet(glyphMap, fontFamily[, fontFile])

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

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

createMultiStyleIconSet(styles [, options])

Animation

Supported versions