Getting started

Add the "Getting started" animated icon (id: getting-started) from Generative Icons by LottieFiles to this project.

1. Look at the project first: framework, package manager, and where static assets are served. In a monorepo, target the app that needs the icon.
2. Install the runtime: `npm install @lottiefiles/generative-icons-runtime`. For React or Next.js, also install `@lottiefiles/generative-icons-react`. Use the project's package manager.
3. Run `npx generative-icons init`, then `npx generative-icons add getting-started`. Follow the agent skill that init writes to `.agents/skills/generative-icons/` (and `.claude/skills/generative-icons/`). Commit `generative-icons.json`, the copied files and `.generative-icons/lock.json`.
4. Render the icon with these settings: color #ffffff, style outline, weight 2, motion light, theme dark. In React, use `<AnimatedIcon icon={icon} src={src} size={24} color="#ffffff" variant="outline" weight={2} motion="light" theme="dark" />` inside a `'use client'` component. Otherwise use `createIcon(canvas, { icon, src, ... })` from `@lottiefiles/generative-icons-runtime` and call `destroy()` when the element is removed.
5. Play it on the interaction it belongs to (click, hover or confirmation). The icon is decorative, so the parent control needs an accessible label. Reduced motion is handled by the runtime.
6. If this is a native iOS or Android app instead, download https://generativeicons.lottiefiles.com/assets/getting-started.lottie and play it with the dotLottie player for that platform.

Guide: https://generativeicons.lottiefiles.com/docs-md/using-packages.md
Library overview for agents: https://generativeicons.lottiefiles.com/llms.txt

npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add getting-started

import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/getting-started.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();

// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/getting-started.mjs';

export function GettingStartedIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}

// Swift Package: github.com/LottieFiles/dotlottie-ios
// Add getting-started.lottie (Download .lottie) to your app target.
import SwiftUI
import DotLottie

struct GettingStartedIcon: View {
  @State private var icon = makeIcon("getting-started", animation: "getting-started")

  var body: some View {
    icon.view()
      .frame(width: 32, height: 32)
      .onTapGesture { icon.play() }
  }
}

func makeIcon(_ file: String, animation: String) -> DotLottieAnimation {
  var config = AnimationConfig()
  config.animationId = animation
  let icon = DotLottieAnimation(fileName: file, config: config)
  icon.subscribe(observer: IconPaint(icon))
  return icon
}

// Applies color and style once per load (loading an animation resets slots).
// Set slots here rather than through a theme, and create a new icon to change
// them later: the current core can crash when a set slot is changed again.
final class IconPaint: Observer {
  weak var icon: DotLottieAnimation?
  init(_ icon: DotLottieAnimation) { self.icon = icon }

  func onLoad() {
    icon?.setColorSlot(slotId: "color.primary", r: 1, g: 1, b: 1)
  }
  func onLoadError() {}
  func onPlay() {}
  func onPause() {}
  func onStop() {}
  func onFrame(frameNo: Float) {}
  func onRender(frameNo: Float) {}
  func onLoop(loopCount: UInt32) {}
  func onComplete() {}
}

// build.gradle.kts: implementation("com.lottiefiles:dotlottie-android:0.16.0")
// Put getting-started.lottie (Download .lottie) in src/main/assets/.
import android.graphics.Color
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.lottiefiles.dotlottie.core.compose.runtime.DotLottieController
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.util.DotLottieEventListener
import com.lottiefiles.dotlottie.core.util.DotLottieSource

@Composable
fun GettingStartedIcon() {
  val controller = remember { DotLottieController() }
  DotLottieAnimation(
    modifier = Modifier.size(32.dp).clickable { controller.play() },
    source = DotLottieSource.Asset("getting-started.lottie"),
    controller = controller,
    // Color and style are set once per load, not through a theme: the current
    // core can crash when a slot that is already set is changed again.
    eventListeners = listOf(object : DotLottieEventListener {
      override fun onLoad() {
        // The file opens on Strong; loading Light fires onLoad again.
        if (controller.activeAnimationId == "getting-started-strong") {
          controller.loadAnimation("getting-started")
          return
        }
        controller.setColorSlot("color.primary", Color.parseColor("#ffffff"))
      }
    })
  )
}