How to use react-native-vector-icons - 10 common examples

preFetch = async () => {
    const { params } = this.props.navigation.state
    await this.setState({
      isLoading: true
    })
    const targetColor = this.props.screenProps.modeInfo.isNightMode ? '#000' : '#fff'

    const result = await Promise.all([
      Ionicons.getImageSource('md-arrow-back', 24, targetColor),
      Ionicons.getImageSource('md-sync', 24, targetColor),
      Ionicons.getImageSource('md-more', 24, targetColor)
    ])
    await this.setState({
      leftIcon: result[0],
      middleIcon: result[1],
      rightIcon: result[2]
    })

    InteractionManager.runAfterInteractions(() => {

      getHomeAPI(params.URL).then(data => {

        this.hasGameTable = data.gameTable.length !== 0
        // console.log(profileToolbar)
        this.setState({
          data,
          isLoading: false

preFetch = async () => {
    const { params } = this.props.navigation.state
    await this.setState({
      isLoading: true
    })
    const targetColor = this.props.screenProps.modeInfo.isNightMode ? '#000' : '#fff'

    const result = await Promise.all([
      Ionicons.getImageSource('md-arrow-back', 24, targetColor),
      Ionicons.getImageSource('md-sync', 24, targetColor),
      Ionicons.getImageSource('md-more', 24, targetColor)
    ])
    await this.setState({
      leftIcon: result[0],
      middleIcon: result[1],
      rightIcon: result[2]
    })

    InteractionManager.runAfterInteractions(() => {

      getHomeAPI(params.URL).then(data => {

        this.hasGameTable = data.gameTable.length !== 0
        // console.log(profileToolbar)
        this.setState({
          data,

preFetch = async () => {
    const { params } = this.props.navigation.state
    await this.setState({
      isLoading: true
    })
    const targetColor = this.props.screenProps.modeInfo.isNightMode ? '#000' : '#fff'

    const result = await Promise.all([
      Ionicons.getImageSource('md-arrow-back', 24, targetColor),
      Ionicons.getImageSource('md-sync', 24, targetColor),
      Ionicons.getImageSource('md-more', 24, targetColor)
    ])
    await this.setState({
      leftIcon: result[0],
      middleIcon: result[1],
      rightIcon: result[2]
    })

    InteractionManager.runAfterInteractions(() => {

      getHomeAPI(params.URL).then(data => {

        this.hasGameTable = data.gameTable.length !== 0
        // console.log(profileToolbar)
        this.setState({
          data,
          isLoading: false

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

// @ts-ignore
import appIconConfig from './app.json';

export default createIconSetFromIcoMoon(appIconConfig);

/* @flow strict-local */
import React, { PureComponent } from 'react';
import { StyleSheet, Image } from 'react-native';
import { createIconSet } from 'react-native-vector-icons';

import type { ImageEmojiType, Dispatch } from '../types';
import { connect } from '../react-redux';
import { nameToEmojiMap } from './data';
import { getAllImageEmojiByName } from './emojiSelectors';

/* $FlowFixMe: `nameToEmojiMap` is mistyped upstream; elements of
  `glyphMap` may be either `number` or `string`. */
const UnicodeEmoji = createIconSet(nameToEmojiMap, 'AppleColorEmoji');

type SelectorProps = {|
  imageEmoji: ImageEmojiType | void,
|};

type Props = $ReadOnly<{|
  name: string,

  dispatch: Dispatch,
  ...SelectorProps,
|}>;

// TODO: this only handles Unicode emoji (shipped with the app)
// and realm emoji, but not Zulip extra emoji.  See our issue #2846.
class Emoji extends PureComponent {
  styles = StyleSheet.create({

import { createIconSet } from 'react-native-vector-icons';
import glyphMap from '@leaa/app/src/assets/fonts/fi/iconfont.json';

const iconSet = createIconSet(glyphMap, 'iconfont', require('@leaa/app/src/assets/fonts/fi/iconfont.ttf'));

export default iconSet;

export const { Button, TabBarItem, TabBarItemIOS, ToolbarAndroid, getImageSource } = iconSet;

// usage:
//                  |---- `name` see iconfont.json
//                  v
//  hello-leaa-app

const React = require('react');
const Component = React.Component;
const { View, TouchableHighlight } = require('react-native');
const Icon = require('react-native-vector-icons/Ionicons').default;

const styles = {
	checkboxIcon: {
		fontSize: 20,
		height: 22,
		// marginRight: 10,
	},
};

class Checkbox extends Component {
	constructor() {
		super();
		this.state = {
			checked: false,
		};
	}

const React = require('react');

const { connect } = require('react-redux');
const { Platform, View, Text, StyleSheet, TouchableOpacity, Image, ScrollView, Dimensions } = require('react-native');
const Icon = require('react-native-vector-icons/Ionicons').default;
const { BackButtonService } = require('lib/services/back-button.js');
const NavService = require('lib/services/NavService.js');
const { Menu, MenuOptions, MenuOption, MenuTrigger } = require('react-native-popup-menu');
const { _ } = require('lib/locale.js');
const Setting = require('lib/models/Setting.js');
const Note = require('lib/models/Note.js');
const Folder = require('lib/models/Folder.js');
const { themeStyle } = require('lib/components/global-style.js');
const { Dropdown } = require('lib/components/Dropdown.js');
const { dialogs } = require('lib/dialogs.js');
const DialogBox = require('react-native-dialogbox').default;

// Rather than applying a padding to the whole bar, it is applied to each
// individual component (button, picker, etc.) so that the touchable areas
// are widder and to give more room to the picker component which has a larger
// default height.

const React = require('react');

const { StyleSheet } = require('react-native');
const Icon = require('react-native-vector-icons/Ionicons').default;
const ReactNativeActionButton = require('react-native-action-button').default;
const { connect } = require('react-redux');
const { _ } = require('lib/locale.js');

const styles = StyleSheet.create({
	actionButtonIcon: {
		fontSize: 20,
		height: 22,
		color: 'white',
	},
	itemText: {
		// fontSize: 14, // Cannot currently set fontsize since the bow surrounding the label has a fixed size
	},
});

class ActionButtonComponent extends React.Component {

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json';

// glyphMap, fontFamily, fontFile三个参数，注意看react-native-vector-icons官方文档中方法注释，
// Android中fontFamily可以随便写，iOS必须是正确的名字否则运行报错，iOS可以直接双击iconfont.ttf打开看字体实际叫什么名字
const iconSet = createIconSet(glyphMap, 'iconFont', 'iconfont.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;