The react-native-vector-icons package provides a set of customizable icons for React Native applications. It includes a variety of icon sets and allows for easy integration and customization of icons in your app.

What are react-native-vector-icons's main functionalities?

Basic Icon Usage

This feature allows you to use icons from various icon sets like FontAwesome. You can specify the icon name, size, and color.

import Icon from 'react-native-vector-icons/FontAwesome';

const MyComponent = () => (
  <Icon name="rocket" size={30} color="#900" />
);

Icon Button

You can use icons as buttons by wrapping them in a TouchableOpacity component. This makes the icon interactive.

import Icon from 'react-native-vector-icons/FontAwesome';
import { TouchableOpacity } from 'react-native';

const MyComponent = () => (
  <TouchableOpacity>
    <Icon name="rocket" size={30} color="#900" />
  </TouchableOpacity>
);

Custom Icon Fonts

This feature allows you to create custom icon sets from Fontello or other similar services. You can then use these custom icons in your app.

import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';

const Icon = createIconSetFromFontello(fontelloConfig);

const MyComponent = () => (
  <Icon name="custom-icon" size={30} color="#900" />
);

Other packages similar to react-native-vector-icons

Readme

Source

Vector Icons for React Native

Installation

$ npm install react-native-vector-icons --save

Usage

Generate your custom icon font at fontello. Add icon fonts to your project and remember to add it under "Fonts provided by application" in your Info.plist.

var fontelloConfig = require('./config.json');
var { createIconSetFromFontello } = require('react-native-vector-icons');
var Icon = createIconSetFromFontello(fontelloConfig);

<Icon name="facebook" size={30} style={{ padding: 5, color: '#fff', backgroundColor: '#3b5998' }} />

Keywords

FAQs

What is react-native-vector-icons?

Is react-native-vector-icons popular?

Is react-native-vector-icons well maintained?

Last updated on 15 May 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install