Basic Usage

To use a icon font, you have to make sure you import them into your project. Only after the font is loaded, you can use Icon set.

'icon': require('../assets/fonts/font-icon.ttf')

Read more on about pre-loading and caching assets.

You can use your own set of icons. See section Custom Icons how to create and use your set of icons.

CAUTION

FlexNative Icons uses expo-font from Expo wich require expo dependencies. If you are using plain react-native without expo you need to install react-native-unimodules.

Fallow this link to Migrating to Expo modules.

App

/src/app.jsx

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';

import useCachedResources from './hooks/useCachedResources';
import Icon, { Spinner } from '@flexnative/icons';

export default function App() {
  const isLoadingComplete = useCachedResources();
  
  if (!isLoadingComplete) {
    return null;
  } else {
      return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        <Icon name='sun' color='rgb(255, 174, 16)' size={32} />
        <Spinner name='spinner' style={styles.spinner} />
      </View>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  spinner: {
    fontSize: 32,
    color: '#EF0003'
  },
  box: {
    width: 50,
    height: 50,
  }
});

useCachedResources

/src/hooks/useCachedResources.jsx

/*
Example of pre-loading and caching icons.
(it is available for any custom font).
*/
import React from 'react';
import { useEffect, useState } from 'react';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

export default function useCachedResources() {
const [isLoadingComplete, setLoadingComplete] = useState(false);

useEffect(() => {
  async function loadResourcesAndDataAsync() {
    try {
        SplashScreen.preventAutoHideAsync();

        // Load fonts
        await Font.loadAsync({
        'icon': require('../assets/fonts/font-icon.ttf'),
        });
    } catch (e) {
        console.error(e);
    } finally {
        setLoadingComplete(true);
        SplashScreen.hideAsync();
    }
  }

  loadResourcesAndDataAsync();
}, []);

return isLoadingComplete;
}

Properties

IconProps

Interface representing the properties for an icon component.

info

Icon and Spinner components expects props of type IconProp which extends TextProps from React Native

Name	Type	Required	Default Value	Description
name	IconName	true	undefined	Name of the icon to use (Specific to the chosen Icon Pack)
size	FontSize	false	theme.fontSize.default	Icon size.
color	BaseColors | ColorValue	false	theme.colors.text	Icon color one of color used by BaseTheme<TColors> or given ColorValue by user.

IconName

Interface representing the names of various icons. Each property is a readonly string representing a specific icon name. These names can be used to access the corresponding Unicode value from the icons object.

Name	Unicode Value	Icon
rocket	rocket
lock	lock
unlock	unlock
filet-jsx	filet-jsx
filet-tsx	filet-tsx
file-code	file-code
folder-open	folder-open
shield-lock	shield-lock
fingerprint	fingerprint
layout	layout
sort-number-desc	sort-number-desc
sort-number-asc	sort-number-asc
sort-alphabet-desc	sort-alphabet-desc
sort-alphabet-asc	sort-alphabet-asc
unsort	unsort
puzzle	puzzle
multi-device	multi-device
lightning	lightning
gridicons	gridicons
light-dark	light-dark
color-palete	color-palete
check	check
badge	badge
menu	menu
bookmark	bookmark
label	label
grid	grid
text-block	text-block
popup	popup
modal	modal
filet-json	filet-json
file-excel	file-excel
avatar	avatar
users	users
chevron-left	chevron-left
caret-down	caret-down
caret-up	caret-up
sun	sun
moon	moon
star	star
image	image
check-list	check-list
checkbox	checkbox
number-input	number-input
button	button
text-box	text-box
web	web
android	android
apple	apple
close-circle	close-circle
material-design	material-design
spinner-1	spinner-1
spinner-2	spinner-2
spinner-3	spinner-3
sort-alt	sort-alt
spinner	spinner
spinner-ios	spinner-ios
file-pdf	file-pdf
paint-brush	paint-brush
trash	trash

Using Icon component

Example ouf usecase with Icon component.

import Icon from '@flexnative/icons';

<Icon name='sun' color='rgb(255, 174, 16)' size={32} />

Using with Plain text

You can use icons through Icon Component from @flexnative/icons or as a usual text with Text component from react-native as the following examples:

import { StyleSheet, Text } from 'react-native';

<Text style={styles.text}>{'\u0053'}</Text>

const styles = StyleSheet.create({
  text: {
    fontFamily: 'icon',
    color: 'rgb(255, 174, 16)',
    fontSize: 32
  }
});

Spinner

import { Spinner } from '@flexnative/icons';

<Spinner name='sun' color='rgb(255, 174, 16)' size={32} />