Embed interactive Rive animated icons in React with state machine support using @rive-app/react-canvas.
Add the Rive React canvas package from npm.
npm install @rive-app/react-canvasImport RiveComponent and point it at your downloaded .riv file. The state machine names 'Clicked' and 'Hover' are included with Unicorn Icons.
import { RiveComponent } from "@rive-app/react-canvas";
function RiveIcon() {
return (
<RiveComponent
src="/your_animation.riv"
stateMachines="State Machine 1" // e.g. "Clicked", "Hover"
artboard="Main"
autoplay
style={{ width: 150, height: 150 }}
/>
);
}Use the useRive hook to access the runtime and fire state machine inputs programmatically.
import { useRive } from "@rive-app/react-canvas";
import { useEffect } from "react";
function RiveIcon() {
const { rive, RiveComponent } = useRive({
src: "/your_animation.riv",
stateMachines: "State Machine 1",
autoplay: true,
});
useEffect(() => {
const inputs = rive?.stateMachineInputs("State Machine 1");
const trigger = inputs?.find((i) => i.name === "Trigger");
trigger?.fire();
}, [rive]);
return <RiveComponent style={{ width: 150, height: 150 }} />;
}