@expo/vector-icons

What is @expo/vector-icons?

@expo/vector-icons is a popular npm package that provides a set of customizable icons for React Native applications. It includes a wide variety of icons from different icon sets such as FontAwesome, MaterialIcons, Ionicons, and more. This package is particularly useful for developers looking to enhance the visual appeal of their applications with minimal effort.

What are @expo/vector-icons's main functionalities?

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;

Other packages similar to @expo/vector-icons

react-native-vector-icons

react-native-vector-icons is another popular package that provides a wide range of customizable icons for React Native applications. It supports multiple icon sets like FontAwesome, MaterialIcons, and Ionicons, similar to @expo/vector-icons. However, it requires additional setup for linking the native dependencies, whereas @expo/vector-icons is more straightforward to use with Expo projects.

react-icons

react-icons is a versatile package that provides a collection of icons for React applications, including web and React Native. It supports a wide range of icon sets and allows for easy integration and customization. While it is not specifically tailored for React Native like @expo/vector-icons, it offers a broader range of icons and can be used in various types of React projects.

react-native-elements

react-native-elements is a UI toolkit for React Native that includes a set of customizable components, including icons. It uses react-native-vector-icons under the hood for its icon component, providing a seamless experience for adding icons to your application. It offers additional UI components beyond just icons, making it a more comprehensive solution for building React Native applications.

README

@expo/vector-icons

This library is a compatibility layer around @oblador/react-native-vector-icons to work with the Expo asset system. If you're using React Native without Expo, you have no need for this library -- carry on! (or maybe check out Expo).

Resources

• @expo/vector-icons directory - a searchable list of all included icons.
• Font Awesome icons directory - all Font Awesome icons (including the Pro icons)
• Expo documentation

Usage

This library is part of the expo package, so if you are using expo you can simply use it like so

import React from 'react';
import Ionicons from '@expo/vector-icons/Ionicons';

export default class IconExample extends React.Component {
  render() {
    return <Ionicons name='md-checkmark-circle' size={32} color='green' />;
  }
}

for more usage see Expo icons documentation

Maintainers

How to upgrade the react-native-vector-icons version

I'll be honest with you, it's not straightforward. You should set aside about an hour to do this.

• Clone react-native-vector-icons
• Copy files from the cloned directory into src/vendor/react-native-vector-icons, except the dotfiles.
• Run git status and look at the untracked files. Remove anything that doesn't seem needed. For example, remove package.json, react-native.config.js, react-native.osx.js. Things to look out for are new icon fonts or new create-* files.
• Run git diff **/*.js - do any of the changes look like they should be synced over to the equivalent .ts files in src?/

• ToolBarAndroid and TabBarIOS are not included in @expo/vector-icons
• Neither are the native vendor font loading or image source related methods.
• Probably there won't be anything important. The main thing to look out for are user-facing API changes, the @expo/vector-icons internals are different enough that you don't need to worry about it.
• Were any dependencies added? Check imports against those in the current package.json, see why they were added - maybe they support the bin scripts, in which case we need them.
• TypeScript/Flow types for Icon/Icon.Button components may need to be updated.

• Run yarn when you're done and it'll copy vendor files over to build.
• Go to the website directory, test it out by changing the @expo/vector-icons version to "../" (TODO: investigate this quirk!). If new icons were added, ensure that they work here.

• While you're here, it would be kind of you to update the Expo SDK version to latest.

• Publish an alpha release, switch back the version in the website to that version.
• Open a PR, have someone else like @brentvatne look at it. If it's good to go, publish the final version, update the website version again, then merge. The website will be deployed when you merge to master.

How to deploy the website

Create a commit on master.