tessl/npm-react-native-vector-icons

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

—

Pending

Overview

Eval results

Files

Core Icon Creation

Name: tessl/npm-react-native-vector-icons
Author: tessl

The foundational API for creating icon components from font files and glyph mappings. This is the primary interface for building custom icons or integrating new font families.

Capabilities

CreateIconSet Function

Creates a React component for rendering vector icons from a font file.

/**
 * Creates an icon component from a glyph mapping and font information
 * @param glyphMap - Object mapping icon names to Unicode code points
 * @param postScriptName - PostScript name of the font
 * @param fontFileName - Font file name (e.g., 'MyFont.ttf')
 * @param fontStyle - Optional React Native TextStyle overrides
 * @returns Icon component with getImageSource methods
 */
function createIconSet<GM extends Record<string, number>>(
  glyphMap: GM,
  postScriptName: string,
  fontFileName: string,
  fontStyle?: TextStyle
): IconComponent<GM>;

/**
 * Creates an icon component using options object (preferred for dynamic loading)
 * @param glyphMap - Object mapping icon names to Unicode code points
 * @param options - Configuration object for font and styling
 * @returns Icon component with getImageSource methods
 */
function createIconSet<GM extends Record<string, number>>(
  glyphMap: GM,
  options: CreateIconSetOptions
): IconComponent<GM>;

interface CreateIconSetOptions {
  /** PostScript name of the font family */
  postScriptName: string;
  /** Font file name including extension */
  fontFileName: string;
  /** Optional font source for dynamic loading (Expo environments) */
  fontSource?: FontSource;
  /** Optional React Native TextStyle overrides */
  fontStyle?: TextStyle;
}

interface IconComponent<GM extends Record<string, number>> {
  /** React component for rendering icons */
  (props: IconProps<keyof GM>): JSX.Element;
  /** Generate image source asynchronously */
  getImageSource(name: keyof GM, size?: number, color?: string): Promise<ImageSource>;
  /** Generate image source synchronously */
  getImageSourceSync(name: keyof GM, size?: number, color?: string): ImageSource | undefined;
}

interface IconProps<T> {
  /** Icon name from the glyph map */
  name: T;
  /** Icon size in points (default: 12) */
  size?: number;
  /** Icon color (default: 'black') */
  color?: string;
  /** Additional React Native Text styles */
  style?: TextStyle;
  /** Ref forwarding for the underlying Text component */
  innerRef?: React.Ref<Text>;
  /** Enable font scaling with device accessibility settings */
  allowFontScaling?: boolean;
}

type ImageSource = {
  /** Data URI or file path to the generated image */
  uri: string;
  /** Image scale factor for different screen densities */
  scale: number;
};

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

Usage Examples:

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

// Basic usage with separate parameters
const myGlyphMap = {
  'home': 0xE88A,
  'search': 0xE8B6,
  'star': 0xE838,
};

const MyIcon = createIconSet(
  myGlyphMap,
  'MaterialIcons-Regular',
  'MaterialIcons-Regular.otf'
);

// Usage in React Native
<MyIcon name="home" size={24} color="#4A90E2" />

// Advanced usage with options (for dynamic loading)
const DynamicIcon = createIconSet(myGlyphMap, {
  postScriptName: 'MaterialIcons-Regular',
  fontFileName: 'MaterialIcons-Regular.otf',
  fontSource: require('./fonts/MaterialIcons-Regular.otf'),
  fontStyle: { fontWeight: '400' }
});

// Generate image sources
const imageSource = await MyIcon.getImageSource('home', 24, '#4A90E2');
// imageSource = { uri: 'data:image/png;base64,...', scale: 1 }

const syncImageSource = MyIcon.getImageSourceSync('star', 20, 'gold');
// Works if font is already loaded, returns undefined otherwise

Platform-Specific Font Handling

The createIconSet function automatically handles platform-specific font loading:

iOS: Uses PostScript name directly
Android: Uses font basename (filename without extension)
Windows: Uses format /Assets/{fontFileName}#{postScriptName}
Web: Uses PostScript name with proper CSS font-face declarations

Dynamic Loading Integration

When using the options-based signature with fontSource, the icon component automatically integrates with dynamic loading:

// Dynamic loading will be used if:
// 1. fontSource is provided in options
// 2. Dynamic loading is enabled (setDynamicLoadingEnabled(true))
// 3. Expo modules are available

const DynamicIcon = createIconSet(glyphMap, {
  postScriptName: 'CustomFont',
  fontFileName: 'CustomFont.ttf',
  fontSource: require('./assets/CustomFont.ttf') // Enables dynamic loading
});

Error Handling

The createIconSet function includes built-in error handling:

// Invalid glyph names display as '?' character
<MyIcon name="nonexistent-icon" size={20} /> // Renders '?'

// Missing fonts on platforms show linking errors for native modules
// Dynamic loading failures trigger error callbacks if configured

Install with Tessl CLI

npx tessl i tessl/npm-react-native-vector-icons

docs