How to use @expo/vector-icons - 10 common examples

To help you get started, we’ve selected a few @expo/vector-icons examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github charliecalvert / JsObjects / JavaScript / React / react-native-test / App.js View on Github external
async function loadResourcesAsync() {
    await Promise.all([
        Asset.loadAsync([
            require('./assets/images/robot-dev.png'),
            require('./assets/images/robot-prod.png')
        ]),
        Font.loadAsync({
            // This is the font that we are using for our tab bar
            ...Ionicons.font,
            // We include SpaceMono because we use it in HomeScreen.js. Feel free to
            // remove this if you are not using it in your app
            'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf')
        })
    ]);
}
github microsoft / vscode-react-native / test / smoke / resources / ExpoSample / App.js View on Github external
async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({
      // This is the font that we are using for our tab bar
      ...Ionicons.font,
      // We include SpaceMono because we use it in HomeScreen.js. Feel free to
      // remove this if you are not using it in your app
      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
}
github tasitlabs / tasit / wallet-example / App.tsx View on Github external
_loadResourcesAsync = async () => {
    // TODO: Decide if we need to remove
    // the linking listener somewhere
    console.info("Adding deep linking listener");
    this._addLinkingListener();
    await this._getInitialUrl();
    return Promise.all([
      Asset.loadAsync([
        require("./assets/images/robot-dev.png"),
        require("./assets/images/robot-prod.png")
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf")
      })
    ]);
  };
  _handleLoadingError = error => {
github expo / expo / apps / native-component-list / App.tsx View on Github external
async _loadAssetsAsync() {
    try {
      const iconRequires = Object.keys(Icons).map(key => Icons[key]);

      const assetPromises: Promise[] = [
        Asset.loadAsync(iconRequires),
        Asset.loadAsync(StackAssets),
        // @ts-ignore
        Font.loadAsync(Ionicons.font),
        // @ts-ignore
        Font.loadAsync(Entypo.font),
        // @ts-ignore
        Font.loadAsync(MaterialIcons.font),
        Font.loadAsync({
          'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        }),
      ];
      if (Platform.OS !== 'web')
        assetPromises.push(
          Font.loadAsync({
            Roboto: 'https://github.com/google/fonts/raw/master/apache/roboto/Roboto-Regular.ttf',
          })
        );
      await Promise.all(assetPromises);
    } catch (e) {
      console.log({ e });
    } finally {
      this.setState({ appIsReady: true });
    }
github expo / expo / apps / native-component-list / App.tsx View on Github external
async _loadAssetsAsync() {
    try {
      const iconRequires = Object.keys(Icons).map(key => Icons[key]);

      const assetPromises: Promise[] = [
        Asset.loadAsync(iconRequires),
        Asset.loadAsync(StackAssets),
        // @ts-ignore
        Font.loadAsync(Ionicons.font),
        // @ts-ignore
        Font.loadAsync(Entypo.font),
        // @ts-ignore
        Font.loadAsync(MaterialIcons.font),
        Font.loadAsync({
          'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        }),
      ];
      if (Platform.OS !== 'web')
        assetPromises.push(
          Font.loadAsync({
            Roboto: 'https://github.com/google/fonts/raw/master/apache/roboto/Roboto-Regular.ttf',
          })
        );
      await Promise.all(assetPromises);
    } catch (e) {
      console.log({ e });
    } finally {
github EvanBacon / Lego-Expo / App.js View on Github external
async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({
      // This is the font that we are using for our tab bar
      ...Ionicons.font,
      // We include SpaceMono because we use it in HomeScreen.js. Feel free to
      // remove this if you are not using it in your app
      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
}
github EvanBacon / react-navigation-web-responsive-tabs-demo / App.js View on Github external
async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({
      // This is the font that we are using for our tab bar
      ...Ionicons.font,
      // We include SpaceMono because we use it in HomeScreen.js. Feel free to
      // remove this if you are not using it in your app
      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
}
github Naturalclar / expo-typescript-starter / App.tsx View on Github external
public loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([RobotDev, RobotProd]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
      })
    ]);
  };
github catalinmiron / uzual-mobile / App.js View on Github external
_loadResourcesAsync = async () => {
    this.apolloClient = await setupApolloClient();

    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/buymeacoffee-logo.png'),
        require('./assets/images/youtube-logo.png'),
        require('./assets/images/brain.png')
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        Menlo: require('./assets/fonts/Menlo-Regular.ttf')
      })
    ]);
  };
github vikrantnegi / RN-Book-Search / App.js View on Github external
_loadResourcesAsync = async () =>
    Promise.all([
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // Feel free to remove this if you are not using it in your app
        'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
        'open-sans-regular': require('./assets/fonts/OpenSans-Regular.ttf'),
      }),
    ]);

@expo/vector-icons

Built-in support for popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Expo.

MIT
Latest version published 2 months ago

Package Health Score

86 / 100
Full package analysis