or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-creation.mddynamic-loading.mdicon-families.mdimage-generation.mdindex.md
tile.json

tessl/npm-react-native-vector-icons

Customizable vector icons for React Native with support for multiple icon families and dynamic loading

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-vector-icons@12.3.x

To install, run

npx @tessl/cli install tessl/npm-react-native-vector-icons@12.3.0

index.mddocs/

React Native Vector Icons

React Native Vector Icons is a comprehensive library providing customizable vector icons for React Native applications. It offers over 20 icon families with more than 20,000 icons, supporting all major platforms (iOS, Android, Web, Windows, macOS) with dynamic loading capabilities.

Package Information

  • Package Name: react-native-vector-icons
  • Package Type: npm (monorepo with individual packages)
  • Language: TypeScript
  • Installation: Install individual icon family packages: npm install @react-native-vector-icons/fontawesome6 @react-native-vector-icons/common

Core Imports

Core functionality from the common package:

import { createIconSet, DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from "@react-native-vector-icons/common";

Individual icon family packages:

import FontAwesome6 from "@react-native-vector-icons/fontawesome6";
import AntDesign from "@react-native-vector-icons/ant-design";
import Feather from "@react-native-vector-icons/feather";

For CommonJS:

const { createIconSet } = require("@react-native-vector-icons/common");
const FontAwesome6 = require("@react-native-vector-icons/fontawesome6");

Basic Usage

Using pre-built icon components:

import React from 'react';
import { View } from 'react-native';
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';
import AntDesign from '@react-native-vector-icons/ant-design';

export default function MyComponent() {
  return (
    <View>
      <FontAwesome6 name="home" size={20} color="#4F8EF7" />
      <FontAwesome6 name="star" size={24} color="gold" iconStyle="solid" />
      <AntDesign name="heart" size={18} color="red" />
    </View>
  );
}

Creating custom icon sets:

import { createIconSet } from '@react-native-vector-icons/common';

const customGlyphMap = {
  'icon-name': 0x1234,
  'another-icon': 0x5678,
};

const CustomIcon = createIconSet(
  customGlyphMap,
  'CustomFontName',
  'CustomFont.ttf'
);

// Usage
<CustomIcon name="icon-name" size={20} color="#333" />

Architecture

React Native Vector Icons is built around several key components:

  • Common Package: Core functionality for creating icon components and managing fonts
  • Icon Family Packages: Pre-built components for specific icon sets (FontAwesome, Material, etc.)
  • Native Module: Optional get-image package for generating PNG images from font glyphs
  • Dynamic Loading: Support for runtime font loading in Expo environments
  • Multi-Style Support: Some icon families support multiple font weights/styles (regular, solid, brand)

Capabilities

Core Icon Creation

The foundational API for creating icon components from font files and glyph mappings.

function createIconSet<GM extends Record<string, number>>(
  glyphMap: GM,
  postScriptName: string,
  fontFileName: string,
  fontStyle?: TextStyle
): IconComponent<GM>;

function createIconSet<GM extends Record<string, number>>(
  glyphMap: GM,
  options: CreateIconSetOptions
): IconComponent<GM>;

Core Icon Creation

Dynamic Font Loading

Runtime font loading capabilities for Expo environments with automatic fallback handling.

function isDynamicLoadingEnabled(): boolean;
function isDynamicLoadingSupported(): boolean;
function setDynamicLoadingEnabled(value: boolean): boolean;
function setDynamicLoadingErrorCallback(callback: ErrorCallback): void;

Dynamic Font Loading

Pre-built Icon Families

Ready-to-use icon components for popular icon sets including FontAwesome, Material Design, Ant Design, and more.

interface IconProps {
  name: string;
  size?: number;
  color?: string;
  style?: TextStyle;
}

// Standard icon component interface
type IconComponent<T> = React.FC<IconProps & { name: T }> & {
  getImageSource(name: T, size?: number, color?: string): Promise<ImageSource>;
  getImageSourceSync(name: T, size?: number, color?: string): ImageSource;
};

Icon Families

Image Generation

Convert font glyphs to PNG images for use in non-React Native contexts.

function getImageForFont(
  fontFamilyName: string,
  glyph: string,
  fontSize: number,
  color: number
): Promise<string>;

function getImageForFontSync(
  fontFamilyName: string,
  glyph: string,
  fontSize: number,
  color: number
): string;

Image Generation

Constants and Types

const DEFAULT_ICON_SIZE: number; // 12
const DEFAULT_ICON_COLOR: string; // 'black'

interface CreateIconSetOptions {
  postScriptName: string;
  fontFileName: string;
  fontSource?: FontSource;
  fontStyle?: TextStyle;
}

interface IconProps<T> {
  name: T;
  size?: number;
  color?: string;
  style?: TextStyle;
  innerRef?: React.Ref<Text>;
  allowFontScaling?: boolean;
}

type ErrorCallback = (args: {
  error: Error;
  fontFamily: string;
  fontSource: FontSource;
}) => void;

type FontSource = any; // Platform-specific asset source (require() result)

type ImageSource = {
  uri: string;
  scale: number;
};