Using unicorn icons in react

Learn how to integrate lottie animations into your react application effortlessly.

1. Install rive

Install rive react canvas dependency from npm

copy

npm install @rive-app/react-canvas

2. Add rive animation to your component

Import animated icon json file in your component

copy

import { RiveComponent } from "@rive-app/react-canvas";

function LottieIcon() {
  return (
    <RiveComponent
      src="/your_animation.riv"
      stateMachines="State Machine 1" // Clicked , Hover
      artboard="Main"
      autoplay
      style={{ width: 150, height: 150 }}
    />
  );
}

3. Control rive animation

copy

import { useRive } from "@rive-app/react-canvas";

const { rive, RiveComponent } = useRive({
  src: "/your_animation.riv",
  stateMachines: "State Machine 1", // Clicked , Hover
  autoplay: true,
});

useEffect(() => {
  const input = rive?.stateMachineInputs("State Machine 1").find(i => i.name === "Trigger");
  input?.fire();
}, [rive]);

4. Get Lottie Animations

Find free animations at Unicornicons.

We use cookies