How to use the @expo/vector-icons.MaterialIcons.font function in @expo/vector-icons

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 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 / home / HomeApp.js View on Github external
_initializeStateAsync = async () => {
    try {
      Store.dispatch(SettingsActions.loadSettings());
      Store.dispatch(HistoryActions.loadHistory());
      const storedSession = await LocalStorage.getSessionAsync();

      if (storedSession) {
        Store.dispatch(SessionActions.setSession(storedSession));
      }

      if (Platform.OS === 'ios') {
        await Promise.all([Font.loadAsync(Ionicons.font)]);
      } else {
        await Promise.all([Font.loadAsync(Ionicons.font), Font.loadAsync(MaterialIcons.font)]);
      }
    } catch (e) {
      // ..
    } finally {
      this.setState({ isReady: true }, async () => {
        if (Platform.OS === 'ios') {
          // if expo client is opened via deep linking, we'll get the url here
          const initialUrl = await Linking.getInitialURL();
          if (initialUrl) {
            Linking.openURL(initialUrl);
          }
        }
      });
    }
  };
github expo / harvard-cs50-app / App.js View on Github external
async _loadAssetsAsync() {
    const imageAssets = this._cacheImages([
      require('./assets/videoplayer/thumb.png'),
      require('./assets/videoplayer/track.png'),
    ]);
    const fontAssets = this._cacheFonts([
      fonts,
      EvilIcons.font,
      FontAwesome.font,
      Ionicons.font,
      MaterialIcons.font,
      Foundation.font,
    ]);

    try {
      await Promise.all([
        Store.rehydrateAsync(),
        ...imageAssets,
        ...fontAssets,
      ]);
      Store.dispatch({ type: 'SET_DATA', data: Data });
    } catch (e) {
      console.log('Error downloading assets', e);
      Sentry.captureException(e);
    }

    this._downloadManager = new DownloadManager(Store);
github F4b1n0u / my-games / app / components / app.js View on Github external
if (!isLoaded && !isLoading) {
      startLoad()

      const imageAssets = cacheImages([
        require('../../assets/images/all-games-wallpaper.png'),
        require('../../assets/images/arrow.png'),
        require('../../assets/images/arrows.png'),
        require('../../assets/images/giantbomb-logo.png'),
        require('../../assets/images/icon.png'),
      ])

      const fontAssets = cacheFonts([
        Ionicons.font,
        MaterialCommunityIcons.font,
        MaterialIcons.font,
        Octicons.font,
        {
          'florentia-extralight': require('../../assets/fonts/florentia.extralight.ttf'),
          'arista-pro-extralight': require('../../assets/fonts/arista-pro-extralight.ttf'),
          'let-that-be-enough-regular': require('../../assets/fonts/let-that-be-enough.regular.ttf'),
        }
      ])

      await Promise.all([
        ...imageAssets,
        ...fontAssets,
      ])

      endLoad()
    }
  }
github expo / playlist-example / App.js View on Github external
(async () => {
      await Font.loadAsync({
        ...MaterialIcons.font,
        "cutive-mono-regular": require("./assets/fonts/CutiveMono-Regular.ttf")
      });
      this.setState({ fontLoaded: true });
    })();
  }
github nomadcoders / nomadgrapp / App.js View on Github external
_loadAssetsAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require("./assets/images/logo.png"),
        require("./assets/images/logo-white.png"),
        require("./assets/images/noPhoto.jpg"),
        require("./assets/images/photoPlaceholder.png")
      ]),
      Font.loadAsync({
        ...Ionicons.font,
        ...MaterialIcons.font
      })
    ]);
  };
  _handleLoadingError = error => {

@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 years ago

Package Health Score

67 / 100
Full package analysis