Lottie and native apps

@open-symbols/lottie exports engine motion as Lottie JSON or dotLottie v2 archives. It is an exporter for build steps and asset workflows; choose the React Native adapter when you need live engine values and triggers in a React Native app.

Install and export

npm install @open-symbols/lottie @open-symbols/core
npx open-symbols-lottie --icons wifi01,home01 --out ./lottie

The command writes icons/wifi01.lottie and icons/home01.lottie, plus an index describing the animations. Each archive contains the 12 time-based public presets. To write individual JSON animations instead:

npx open-symbols-lottie --icons wifi01 --presets appear,drawOn --format json --out ./lottie

The JSON files are written under json/wifi01/. Select categories with --category, or export the catalog with --all. Run npx open-symbols-lottie --help for all flags.

Function API

import { writeFileSync } from "node:fs";
import { exportLottie } from "@open-symbols/lottie";
import wifi from "@open-symbols/core/icons/wifi01";

const { json } = exportLottie(wifi, "appear", { strokeWidth: 1.5 });
writeFileSync("wifi-appear.json", JSON.stringify(json));

Playback

Playback was checked with lottie-web, dotlottie-web, lottie-ios and lottie-android. Other players are not verified. Exports use 24 × 24 viewBox units and 60 fps. The player controls playback and must respect the app's reduced-motion preference.

One-shot animations end at the engine's settled frame; an exit remains invisible. Looping animations contain one cycle, which the player repeats. A normal rotate is one turn; loader icons with indefinite rotation export a loop. variableColor moves only on icons with a variable level; on the others it is a still pose that the index marks still: true. scale holds its pose and plays once.

Under reduced motion, show the plain icon (the last frame of appear) for any preset except the exits disappear and drawOff, whose last frame is invisible. The last frame of a loop is not guaranteed to be the resting pose (a breathe loop never ends at rest). The native wrappers follow this rule.

Exports are monochrome. Tint through the player's supported color controls. Runtime speed, intensity, scope and direction options are baked at export defaults. progress has no time dimension and is available through --values fixed-value variants. replace and duotone are not exported.

Native apps

SwiftUI

The Swift package is available at version 0.1.0. Add it in Xcode through File → Add Package Dependencies, or in Package.swift:

.package(url: "https://github.com/ashutoshxsingh10/open-symbols-lottie-ios.git", exact: "0.1.0")

Add the OpenSymbolsLottie product to your target, then render a symbol:

import OpenSymbolsLottie

OpenSymbolView(.wifi01, preset: .pulse)
  .frame(width: 32, height: 32)

The wrapper targets iOS 15+ and bundles 300 essential icons with attribution. Other icons load from the versioned asset distribution. The full set of 2,000 dotLottie files, collections and checksums is available in the 0.1.0 asset release.

Android

The Compose wrapper is available from Maven Central. Ensure your project's dependency repositories include mavenCentral(), then add this to your app module's build.gradle.kts:

dependencies {
    implementation("io.github.ashutoshxsingh10:open-symbols-lottie:0.1.0")
}

Use the wrapper inside a Compose function:

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import dev.opensymbols.lottie.OpenSymbol
import dev.opensymbols.lottie.generated.OpenSymbolName
import dev.opensymbols.lottie.generated.OpenSymbolPreset

@Composable
fun ConnectionIcon() {
    OpenSymbol(
        OpenSymbolName.WIFI01,
        preset = OpenSymbolPreset.PULSE,
        modifier = Modifier.size(32.dp),
        contentDescription = "Wireless connection",
    )
}

The wrapper requires Android API 24+ and a Compose-enabled app. It includes 300 essential icons and loads other icons from the versioned asset distribution. Playback follows the system reduced-motion setting; reduceMotion can override it. See the support matrix for tested configurations.