Package Exports

react-native-sfsymbols
react-native-sfsymbols/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-sfsymbols) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-sfsymbols

Use SF Symbols in React Native for iOS

⚠️ iOS 14+ only (& more soon)
💔 Android or other platforms cannot be supported

iOS Simulator with icons example Example app

Setup

npm install --save react-native-sfsymbols

# --- or ---

yarn add react-native-sfsymbols

Don't forget to run cd ios && pod install && cd .. after that !

Manual installation

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-sfsymbols and add RNSfsymbols.xcodeproj
In XCode, in the project navigator, select your project. Add libRNSfsymbols.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

Usage

import { SFSymbol } from "react-native-sfsymbols";

export function Example() {
  return (
    <SFSymbol
      name="thermometer.sun.fill"
      weight="semibold"
      scale="large"
      color="red"
      size={16}
      resizeMode="center"
      multicolor={false}
      style={{ width: 32, height: 32 }}
    />
  );
}

They can be animated with Animated

import { Animated } from "react-native";
import { SFSymbol } from "react-native-sfsymbols";

const AnimatedSFSymbol = Animated.createAnimatedComponent(SFSymbol);

<AnimatedSFSymbol
  name="sun.min.fill"
  style={{
    opacity: new Animated.Value(1),
  }}
/>;

Props

name

The symbol name you want to display, can be seen in the SF Symbols application.

color (optional)

The color of the symbol written as a hex or color value. PlatformColor and DynamicColorIOS also works.

weight (optional)

The (font) weight of the symbol.

ultralight
light
thin
regular
medium
semibold
bold
heavy

Multicolor has issues with this "thin" weight.

scale (optional)

The scale of the symbol, it will optimise the thickness of detail strokes in the icon for different sizes.

small
medium
large

multicolor (optional)

Enable multicolor, don't pass a "color" for it to work properly.

size (optional)

Font size of the icon as a number.

resizeMode (optional)

Resize mode of the icon. When "size" is given, it will default to "center" otherwise "scale-aspect-fill".

scale-to-fill
scale-aspect-fit
scale-aspect-fill
redraw
center
top
bottom
left
right
top-left
top-right
bottom-left
bottom-right
cover
contain
stretch