tessl/npm-expo--vector-icons

Built-in support for popular icon fonts and the tooling to create your own Icon components from your font and glyph map - a wrapper around react-native-vector-icons to make it compatible with Expo.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@expo/vector-icons

Name: tessl/npm-expo--vector-icons
Author: tessl

@expo/vector-icons is a compatibility layer around react-native-vector-icons that provides built-in support for popular icon fonts and the tooling to create your own Icon components from your font and glyph map. It makes react-native-vector-icons compatible with Expo's asset system while offering 15+ pre-configured icon sets and utilities for creating custom icon sets.

Package Information

Package Name: @expo/vector-icons
Package Type: npm
Language: TypeScript
Installation: npm install @expo/vector-icons (included with Expo SDK)

Core Imports

import Ionicons from '@expo/vector-icons/Ionicons';
import { AntDesign, Feather, MaterialIcons } from '@expo/vector-icons';
import { FA5Style, FA6Style } from '@expo/vector-icons';
import { createIconSet, createMultiStyleIconSet } from '@expo/vector-icons';
import { createFA5iconSet, createFA6iconSet } from '@expo/vector-icons';

For CommonJS:

const Ionicons = require('@expo/vector-icons/Ionicons').default;
const { AntDesign, Feather, MaterialIcons, FA5Style, FA6Style } = require('@expo/vector-icons');
const { createIconSet, createMultiStyleIconSet, createFA5iconSet, createFA6iconSet } = require('@expo/vector-icons');

Basic Usage

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

export default function IconExample() {
  return (
    <View>
      {/* Basic icon usage */}
      <Ionicons name="home" size={24} color="black" />
      
      {/* Icon with custom styling */}
      <AntDesign name="star" size={32} color="gold" />
      
      {/* Icon Button component */}
      <MaterialIcons.Button 
        name="favorite" 
        backgroundColor="red"
        onPress={() => console.log('Pressed!')}
      >
        Like
      </MaterialIcons.Button>
    </View>
  );
}

Architecture

@expo/vector-icons is built around several key components:

Pre-configured Icon Sets: 15 ready-to-use icon font components (AntDesign, FontAwesome, MaterialIcons, etc.)
Icon Interface: Standardized React component interface with props, Button variant, and utility methods
Font Loading System: Expo-compatible font loading with async support and fallback handling
Creation Utilities: Functions for generating custom icon sets from font files and glyph maps
Type Safety: Full TypeScript support with specific glyph name enums for each icon set

Capabilities

Pre-configured Icon Sets

Ready-to-use React components for popular icon fonts, each with typed glyph names and consistent API.

// All icon sets implement this interface
interface Icon<G extends string, FN extends string> {
  defaultProps: any;
  Button: ComponentClass<IconButtonProps<G>>;
  glyphMap: GlyphMap<G>;
  getRawGlyphMap(): GlyphMap<G>;
  getFontFamily(): FN;
  getImageSource(name: G, size: number, color: ColorValue): Promise<ImageSource | null>;
  loadFont(): Promise<void>;
  font: { [x: string]: any };
  new (props: IconProps<G>): React.Component<IconProps<G>>;
}

interface IconProps<GLYPHS extends string> extends TextProps {
  /** Size of the icon (default: 12) */
  size?: number;
  /** Name of the icon to show - see https://icons.expo.fyi/ */
  name: GLYPHS;
  /** Color of the icon */
  color?: string | OpaqueColorValue;
}

Icon Sets

Icon Creation Utilities

Tools for creating custom icon sets from font files, glyph maps, and third-party configurations.

function createIconSet<G extends string, FN extends string>(
  glyphMap: GlyphMap<G>, 
  fontName: FN, 
  expoAssetId: any, 
  fontStyle?: any
): Icon<G, FN>;

function createMultiStyleIconSet(
  styles: FontStyles, 
  optionsInput?: {}
): any;

function createIconSetFromFontello(
  config: any, 
  expoFontName: any, 
  expoAssetId: any
): any;

function createIconSetFromIcoMoon(
  config: any, 
  expoFontName: any, 
  expoAssetId: any
): Icon<string, string>;

function createFA5iconSet(
  glyphMap: any, 
  metadata?: any, 
  fonts: any, 
  pro?: boolean
): any;

function createFA6iconSet(
  glyphMap: any, 
  metadata?: any, 
  fonts: any, 
  pro?: boolean
): any;

Icon Creation

Types

interface IconButtonProps<GLYPHS extends string> extends IconProps<GLYPHS>, ViewProps, TouchableHighlightProps {
  /** Text and icon color (default: 'white') */
  color?: string | OpaqueColorValue;
  /** Border radius of the button (default: 5) */
  borderRadius?: number;
  /** Styles applied to the icon only (default: {marginRight: 10}) */
  iconStyle?: TextStyle;
  /** Button styles */
  style?: ViewStyle | TextStyle;
  /** Background color of the button (default: '#007AFF') */
  backgroundColor?: string | OpaqueColorValue;
}

type GlyphMap<G extends string> = {
  [K in G]: number | string;
};

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

type FontStyles = {
  [key: string]: FontStyle;
};

type FontStyle = {
  fontFamily: string;
  fontFile: any;
  glyphMap: any;
  fontStyle: any;
};

Constants

/** Default color for icons */
const DEFAULT_ICON_COLOR: string;

/** Default size for icons */
const DEFAULT_ICON_SIZE: number;

/** FontAwesome 5 style constants */
const FA5Style: {
  regular: string;
  light: string;
  solid: string;
  brand: string;
};

/** FontAwesome 6 style constants */
const FA6Style: {
  regular: string;
  light: string;
  solid: string;
  brand: string;
  sharp: string;
  sharpLight: string;
  sharpSolid: string;
  duotone: string;
  thin: string;
};