React component for animating spritesheets generated from lavicon.dev with multiple trigger modes (hover, click, auto)
npm install lavicon-animationbash
npm install lavicon-animation
or
yarn add lavicon-animation
`
Required Dependencies
This package requires the following peer dependencies:
`bash
npm install react react-dom framer-motion
`
Usage
`jsx
import { LaviconAnimation } from 'lavicon-animation';
const MyComponent = () => {
return (
Sprite Animation Example
);
};
export default MyComponent;
`
Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| url | string | (required) | URL of the spritesheet (from the public folder) |
| size | number | 96 | Size of the displayed icon (square) |
| frameSize | number | 196 | Size of each frame in the spritesheet |
| fps | number | 30 | Frames per second for the animation |
| cols | number | 10 | Number of columns in the spritesheet |
| totalFrames | number | 150 | Total number of frames in the spritesheet |
| triggerMode | "hover" \| "click" \| "auto" | "hover" | Trigger mode for the animation |
| loop | boolean | false | Loop the animation in auto or click mode |
| initialFrame | number | 0 | Initial frame |
| className | string | "" | Additional CSS classes |
| alt | string | "Animation sprite" | Alt text for accessibility |
| onClick | () => void | undefined | Additional onClick callback |
| autoPlay | boolean | false | Start the animation automatically |
| renderingQuality | "auto" \| "crisp-edges" \| "pixelated" | "crisp-edges" | Rendering quality |
| cursorPointer | boolean | false | Enable/disable cursor pointer |
Usage Examples
$3
`jsx
url="/icons/spritesheet.png"
triggerMode="hover"
size={64}
cols={8}
totalFrames={24}
/>
`
$3
`jsx
url="/icons/spritesheet.png"
triggerMode="click"
size={128}
cols={10}
totalFrames={50}
loop={false}
/>
`
$3
`jsx
url="/icons/spritesheet.png"
triggerMode="auto"
autoPlay={true}
loop={true}
size={48}
cols={12}
totalFrames={36}
/>
``