react-native-sfsymbols

If you cannot use autolinking, follow these steps in Xcode:

1. In Xcode, right-click Libraries ➜ Add Files to [your project's name].
2. Navigate to node_modules/react-native-sfsymbols and add RNSfsymbols.xcodeproj.
3. Select your project in the Xcode navigator.
4. Go to Build Phases ➜ Link Binary With Libraries and add libRNSfsymbols.a.
5. Run your project.

Install the package using npm or yarn, then ensure you install the iOS pods to link the native library.

npm install --save react-native-sfsymbols

# --- or ---

yarn add react-native-sfsymbols

# After installation, run:
cd ios && pod install && cd ..

To use the Animated API with SF Symbols, wrap the component using Animated.createAnimatedComponent.

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

const AnimatedSFSymbol = Animated.createAnimatedComponent(SFSymbol);

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

Import SFSymbol from react-native-sfsymbols to render iOS SF Symbols. Note that this library is iOS 14+ only and does not support Android or other platforms.

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 }}
    />
  );
}

The SFSymbol component allows you to render Apple's SF Symbols in your React Native application. It wraps the native RNSfsymbols component and provides a high-level interface for configuring symbol appearance such as weight, scale, and color.

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

// Basic usage
<SFSymbol name="heart.fill" />

// Advanced usage with styling
<SFSymbol 
  name="heart.fill" 
  color="red" 
  weight="bold" 
  scale="large" 
  size={40} 
/>

The SFSymbol component accepts the following props to control its appearance:

• name: (Required) The string identifier of the SF Symbol (e.g., "heart.fill").
• color: (Optional) A ColorValue to set the symbol's color.
• size: (Optional) A number representing the symbol size.
• weight: (Optional) The thickness of the symbol lines. Use the SFSymbolWeight enum or a SymbolWeight string.
• scale: (Optional) The scale of the symbol. Use the SFSymbolScale enum or a SymbolScale string.
• multicolor: (Optional) A boolean to enable/disable multicolor support.
• resizeMode: (Optional) Determines how the symbol scales. Use a SymbolResizeMode string.
• style: (Optional) Standard React Native ViewStyle props.

The SFSymbolWeight enum defines the available thickness levels for the symbol lines.

export enum SFSymbolWeight {
  ULTRALIGHT = "ultralight",
  LIGHT = "light",
  THIN = "thin",
  REGULAR = "regular",
  MEDIUM = "medium",
  SEMIBOLD = "semibold",
  BOLD = "bold",
  HEAVY = "heavy",
}

The SymbolResizeMode type defines how the symbol should be resized within its container.

type SymbolResizeMode =
  | "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";

The SFSymbolScale enum defines the available scale categories for the symbol.

export enum SFSymbolScale {
  SMALL = "small",
  MEDIUM = "medium",
  LARGE = "large",
}