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

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
size	IconSize	false	'normal'	Icon size
color	IconColor	false	theme.colors.text	Icon color one of color used by BaseTheme<TColors> or given ColorValue by user.

IconName

Name	Unicode Value	Icon
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
file-pdf	file-pdf
paint-brush	paint-brush
trash	trash

IconSize

One of 'small' | 'normal' | 'medium' | 'large' | number

Name	Type	Value
small	number	16
normal	number	16
medium	number	32
large	number	48
	number	Any number value.

IconColor

One of 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | ColorValue

Name	Type	Value	Preview
			Light	Dark
background	ColorValue	theme.colors.background	#f8f8f8	#000000
default	ColorValue	theme.colors.default	#f5f5f5	#404040
card	ColorValue	theme.colors.card	#ffffff	#232323
text	ColorValue	theme.colors.text	#424242	#ffffff
border	ColorValue	theme.colors.border	#42424226	#ffffff1A
placeholder	ColorValue	theme.colors.placeholder	#0000001A	#FFFFFF1A
info	ColorValue	theme.colors.info	#3e80ed	#3e80ed
success	ColorValue	theme.colors.success	#5ec232	#5ec232
warning	ColorValue	theme.colors.warning	#ffc107	#ffc107
error	ColorValue	theme.colors.error	#d51923	#d51923
dark	ColorValue	theme.colors.dark	#424242	#424242
secondary	ColorValue	theme.colors.secondary	#666666	#5C5C5C
light	ColorValue	theme.colors.light	#ebebeb	#ebebeb
primary	ColorValue	theme.colors.primary	#ff6358	#ff6358
	ColorValue	Any ColorValue chosen by developer.

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} />