CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

icon-creation.mddocs/

Icon Creation

Utilities for creating custom icon sets from font files, glyph maps, and third-party configurations like Fontello and IcoMoon.

Capabilities

createIconSet

Core function for creating a React component for rendering icons from a font file and glyph map.

/**
 * Creates a React component for rendering icons from a font
 * @param glyphMap - Mapping of icon names to unicode code points
 * @param fontName - Name of the font family
 * @param expoAssetId - Expo asset reference for the font file
 * @param fontStyle - Optional font styling options
 * @returns Icon component with full interface
 */
function createIconSet<G extends string, FN extends string>(
  glyphMap: GlyphMap<G>, 
  fontName: FN, 
  expoAssetId: any, 
  fontStyle?: any
): Icon<G, FN>;

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

Usage Examples:

import { createIconSet } from '@expo/vector-icons';
import font from './assets/CustomFont.ttf';

// Define your glyph map
const glyphMap = {
  'home': 0xe900,
  'user': 0xe901,
  'settings': 0xe902,
  'heart': 0xe903,
} as const;

// Create the icon set
const CustomIcons = createIconSet(glyphMap, 'CustomFont', font);

// Use like any other icon set
<CustomIcons name="home" size={24} color="black" />
<CustomIcons.Button name="user" backgroundColor="blue">Profile</CustomIcons.Button>

createMultiStyleIconSet

Creates icon sets with multiple font styles (like FontAwesome with different weights).

/**
 * Creates icon sets with multiple font styles
 * @param styles - Object mapping style names to font configurations
 * @param optionsInput - Optional configuration
 * @returns Multi-style icon set component
 */
function createMultiStyleIconSet(
  styles: FontStyles, 
  optionsInput?: {}
): any;

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

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

Usage Examples:

import { createMultiStyleIconSet } from '@expo/vector-icons';
import regularFont from './assets/MyFont-Regular.ttf';
import boldFont from './assets/MyFont-Bold.ttf';

const styles = {
  regular: {
    fontFamily: 'MyFont-Regular',
    fontFile: regularFont,
    glyphMap: { home: 0xe900, user: 0xe901 },
    fontStyle: {}
  },
  bold: {
    fontFamily: 'MyFont-Bold', 
    fontFile: boldFont,
    glyphMap: { home: 0xe900, user: 0xe901 },
    fontStyle: {}
  }
};

const MyIcons = createMultiStyleIconSet(styles);

// Usage with style selection
<MyIcons name="home" size={24} style={MyIcons.regular} />
<MyIcons name="user" size={24} style={MyIcons.bold} />

createIconSetFromFontello

Creates an icon set from a Fontello.com configuration file.

/**
 * Creates icon set from Fontello.com configuration
 * @param config - Fontello configuration object (from config.json)
 * @param expoFontName - Name for the font in Expo
 * @param expoAssetId - Expo asset reference for the font file
 * @returns Icon component
 */
function createIconSetFromFontello(
  config: any, 
  expoFontName: any, 
  expoAssetId: any
): any;

Usage Examples:

import { createIconSetFromFontello } from '@expo/vector-icons';
import fontelloConfig from './assets/fontello-config.json';
import fontelloFont from './assets/fontello.ttf';

// Create icon set from Fontello export
const FontelloIcons = createIconSetFromFontello(
  fontelloConfig,
  'fontello',
  fontelloFont
);

// Fontello config typically looks like:
// {
//   "name": "fontello",
//   "glyphs": [
//     { "uid": "...", "css": "home", "code": 59392, "src": "fontawesome" },
//     { "uid": "...", "css": "user", "code": 59393, "src": "fontawesome" }
//   ]
// }

<FontelloIcons name="home" size={24} color="black" />

createIconSetFromIcoMoon

Creates an icon set from an IcoMoon.io configuration file.

/**
 * Creates icon set from IcoMoon.io configuration
 * @param config - IcoMoon configuration object (from selection.json)
 * @param expoFontName - Name for the font in Expo
 * @param expoAssetId - Expo asset reference for the font file
 * @returns Icon component with full interface
 */
function createIconSetFromIcoMoon(
  config: any, 
  expoFontName: any, 
  expoAssetId: any
): Icon<string, string>;

Usage Examples:

import { createIconSetFromIcoMoon } from '@expo/vector-icons';
import icoMoonConfig from './assets/selection.json';
import icoMoonFont from './assets/icomoon.ttf';

// Create icon set from IcoMoon export
const IcoMoonIcons = createIconSetFromIcoMoon(
  icoMoonConfig,
  'icomoon',
  icoMoonFont
);

// IcoMoon config typically looks like:
// {
//   "icons": [
//     { "properties": { "name": "home", "code": 58880 } },
//     { "properties": { "name": "user", "code": 58881 } }
//   ],
//   "preferences": { "fontName": "icomoon" }
// }

<IcoMoonIcons name="home" size={24} color="black" />

FontAwesome-Specific Creators

Specialized creation functions for FontAwesome 5 and 6 with their multi-style support.

createFA5iconSet

/**
 * Creates FontAwesome 5 icon sets with style support
 * @param glyphMap - FontAwesome 5 glyph mapping
 * @param metadata - FontAwesome 5 metadata object
 * @param fonts - Font files for different styles
 * @param pro - Whether to enable Pro icon support
 * @returns FontAwesome 5 icon set
 */
function createFA5iconSet(
  glyphMap: any, 
  metadata: {} | undefined, 
  fonts: any, 
  pro?: boolean
): any;

const FA5Style: {
  regular: string;
  light: string;
  solid: string;
  brand: string;
};

Usage Examples:

import { createFA5iconSet, FA5Style } from '@expo/vector-icons';
import glyphMap from './FontAwesome5Free.json';
import metadata from './FontAwesome5Free_meta.json';

const fonts = {
  Regular: require('./FontAwesome5_Regular.ttf'),
  Light: require('./FontAwesome5_Regular.ttf'),
  Solid: require('./FontAwesome5_Solid.ttf'),
  Brand: require('./FontAwesome5_Brands.ttf'),
};

// Create FontAwesome 5 icon set
const FA5Icons = createFA5iconSet(glyphMap, metadata, fonts, false);

// Usage with styles
<FA5Icons name="home" size={24} regular />
<FA5Icons name="facebook" size={24} brand />
<FA5Icons name="star" size={24} solid />

createFA6iconSet

/**
 * Creates FontAwesome 6 icon sets with extended style support
 * @param glyphMap - FontAwesome 6 glyph mapping
 * @param metadata - FontAwesome 6 metadata object  
 * @param fonts - Font files for different styles
 * @param pro - Whether to enable Pro icon support
 * @returns FontAwesome 6 icon set
 */
function createFA6iconSet(
  glyphMap: any, 
  metadata: {} | undefined, 
  fonts: any, 
  pro?: boolean
): any;

const FA6Style: {
  regular: string;
  light: string;
  solid: string;
  brand: string;
  sharp: string;
  sharpLight: string;
  sharpSolid: string;
  duotone: string;
  thin: string;
};

Usage Examples:

import { createFA6iconSet, FA6Style } from '@expo/vector-icons';
import glyphMap from './FontAwesome6Free.json';
import metadata from './FontAwesome6Free_meta.json';

const fonts = {
  Regular: require('./FontAwesome6_Regular.ttf'),
  Light: require('./FontAwesome6_Regular.ttf'),
  Solid: require('./FontAwesome6_Solid.ttf'),
  Brand: require('./FontAwesome6_Brands.ttf'),
  // Additional FA6 styles
  Sharp_Regular: require('./FontAwesome6Sharp_Regular.ttf'),
  Sharp_Light: require('./FontAwesome6Sharp_Light.ttf'),
  Sharp_Solid: require('./FontAwesome6Sharp_Solid.ttf'),
  Duotone: require('./FontAwesome6Duotone_Solid.ttf'),
  Thin: require('./FontAwesome6_Thin.ttf'),
};

// Create FontAwesome 6 icon set
const FA6Icons = createFA6iconSet(glyphMap, metadata, fonts, false);

// Usage with extended styles
<FA6Icons name="home" size={24} regular />
<FA6Icons name="facebook" size={24} brand />
<FA6Icons name="star" size={24} solid />
<FA6Icons name="arrow-right" size={24} sharp />
<FA6Icons name="heart" size={24} duotone />
<FA6Icons name="user" size={24} thin />

Constants

// Default styling values from react-native-vector-icons
const DEFAULT_ICON_COLOR: string;
const DEFAULT_ICON_SIZE: number;

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

const FA6Style: {
  regular: string;
  light: string;
  solid: string;
  brand: string;
  sharp: string;
  sharpLight: string;
  sharpSolid: string;
  duotone: string;
  thin: string;
};

These constants are available for import:

import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, FA5Style, FA6Style } from '@expo/vector-icons';

Custom Icon Set Development Workflow

  1. Prepare Your Font: Create or obtain a font file (.ttf, .otf) with your custom icons
  2. Generate Glyph Map: Create a mapping object from icon names to unicode code points
  3. Create Icon Set: Use createIconSet() with your glyph map and font
  4. Export and Use: Export your custom icon set and use it like any pre-configured set

Complete Example:

// CustomIcons.ts
import { createIconSet } from '@expo/vector-icons';
import customFont from '../assets/fonts/CustomIcons.ttf';

const glyphMap = {
  'dashboard': 0xe900,
  'analytics': 0xe901,
  'reports': 0xe902,
  'settings': 0xe903,
  'profile': 0xe904,
} as const;

export default createIconSet(glyphMap, 'CustomIcons', customFont);

// Usage in components
import CustomIcons from './CustomIcons';

<CustomIcons name="dashboard" size={24} color="blue" />
<CustomIcons.Button name="analytics" backgroundColor="green">
  View Analytics
</CustomIcons.Button>

docs

icon-creation.md

icon-sets.md

index.md

tile.json