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 the JavaScript library dependency in the package.json file:

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

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

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 example shows how to implement a TabBar. An 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 reference

Icon component

Either use one of the icons that come 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" />;

Props

Use any Text property and the following:

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

Methods

The following are static methods. | Method | 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

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>
);

Props

You can use 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 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 can 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 use the cache.

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

Methods

These methods are static, and those from Icon are supported by multistyled fonts.

Method	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. Its usage is similar to 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’ve 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 are
 * 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 is
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0, in order to differentiate 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

Package name	Amazon NPM library version	Vega OS build number	Vega SDK version	Release notes
`@amazon-devices/react-native-vector-icons`	2.0.1+9.2.0	`OS 1.1 (201010438050)`	0.20

​Installation

​Upgrading

​Examples

​IconExplorer

​Basic example

​TabBar

​API reference

​Icon component

​Props

​Methods

​Styling

​Icon.Button component

​Props

​Usage as PNG image/source object

​Multistyle fonts

​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 reference

Icon component

Props

Methods

Styling

Icon.Button component

Props

Usage as PNG image/source object

Multistyle fonts

Methods

Components

Custom fonts

createIconSet(glyphMap, fontFamily[, fontFile])

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

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

createMultiStyleIconSet(styles [, options])

Animation

Supported versions