expo-custom-symbol-view

An Expo module for rendering custom SF Symbols from SVG files on iOS.

Important: SVG files must be in Apple's SF Symbol format. You can create and export these using the SF Symbols app (tested with SF Symbols 7.0). Standard SVGs will not work.

Installation

npx expo install expo-custom-symbol-view

Plugin Setup

Add the plugin to your app.json (or app.config.js) with the paths to your custom symbol SVGs:

{
  "expo": {
    "plugins": [
      [
        "expo-custom-symbol-view",
        {
          "symbols": ["./assets/symbols/my-custom-icon.svg"]
        }
      ]
    ]
  }
}

Glob patterns are supported (e.g. "./assets/symbols/*.svg").

The plugin copies each SVG into your Xcode project's asset catalog as a .symbolset during prebuild, making it available at runtime.

Usage

import { CustomSymbolView } from 'expo-custom-symbol-view';

export default function App() {
  return (
    <CustomSymbolView
      name="my-custom-icon"
      size={32}
      tintColor="#007AFF"
      type="hierarchical"
      weight="medium"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | (required) | Symbol name (SVG filename without extension) | | size | number | 24 | Width and height of the symbol | | type | 'monochrome' \| 'hierarchical' \| 'palette' \| 'multicolor' | 'monochrome' | Symbol rendering mode | | tintColor | ColorValue | — | Tint color (used with monochrome/hierarchical) | | colors | ColorValue[] | — | Color array (used with palette mode) | | weight | 'ultraLight' \| 'thin' \| 'light' \| 'regular' \| 'medium' \| 'semibold' \| 'bold' \| 'heavy' \| 'black' | — | Symbol weight | | scale | 'small' \| 'medium' \| 'large' | — | Symbol scale | | resizeMode | 'scaleToFill' \| 'scaleAspectFit' \| 'scaleAspectFill' \| 'center' | 'scaleAspectFit' | How the symbol is scaled within its bounds |

All standard ViewProps (e.g. style, testID) are also supported.

Platform Support

iOS only. On Android and web, CustomSymbolView renders null.

License

MIT