@expo/vector-icons

Basic Icon Usage

This feature allows you to easily include icons in your React Native application. The example demonstrates how to import and use a FontAwesome icon.

import React from 'react';
import { View } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

const App = () => (
  <View>
    <FontAwesome name="home" size={24} color="black" />
  </View>
);

export default App;

Customizing Icon Size and Color

This feature allows you to customize the size and color of the icons. The example shows how to use a MaterialIcon with a specific size and color.

import React from 'react';
import { View } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';

const App = () => (
  <View>
    <MaterialIcons name="alarm" size={48} color="red" />
  </View>
);

export default App;

Using Different Icon Sets

This feature allows you to use icons from different icon sets within the same application. The example demonstrates the usage of Ionicons and Entypo icons.

import React from 'react';
import { View } from 'react-native';
import { Ionicons, Entypo } from '@expo/vector-icons';

const App = () => (
  <View>
    <Ionicons name="ios-add-circle" size={32} color="green" />
    <Entypo name="aircraft" size={32} color="blue" />
  </View>
);

export default App;