# rive_animated_icons

**Repository Path**: weini123/rive_animated_icons

## Basic Information

- **Project Name**: rive_animated_icons
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-02
- **Last Updated**: 2025-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RiveAnimatedIcons - 50+ Icons Now Available! 🚀

<a href="https://developer.android.com" style="pointer-events: stroke;" target="_blank">
<img src="https://img.shields.io/badge/platform-android-blue">
</a>
<a href="https://developer.apple.com/ios/" style="pointer-events: stroke;" target="_blank">
<img src="https://img.shields.io/badge/platform-iOS-blue">
</a>
<a href="" style="pointer-events: stroke;" target="_blank">
<img src="https://img.shields.io/badge/platform-web-blue">
</a>
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-purple.svg" alt="MIT License"></a>

This package provides rive animated icons that can be customized to suit your preference. It includes the riveIcon type, onTap, color parameters and others to give the user a level of control.

We’re excited to announce that we’ve hit a major milestone — 50 animated icons and counting! 🎉



## Icons Sample ⬇️

 
![InShot_20241002_141941742](https://github.com/user-attachments/assets/efdc4c3d-cda9-4884-80e9-f308e7222446)


## Example

```dart

RiveAnimatedIcon(
    riveIcon: RiveIcon.home,
    width: 50,
    height: 50,
    color: Colors.green,
    strokeWidth: 3,
    loopAnimation: false,
    onTap: (){},
    onHover: (value){}                          
),

```


## Required parameter

#### riveIcon:
This parameter is used to define the icon type from the RiveIcon enum

## Optional parameters

#### width:
This parameter is used to set the icon width

#### height:
This parameter is used to set the icon height

#### color:
This parameter is used to set icon color

#### loopAnimation:
When this parameter is set to `true` the icon's animation will be on loop

#### onTap:
This callback is set by the user to perform actions onTap

#### onHover:
This callback is set by the user to perform actions onHover

#### splashColor:
This parameter is used to set icon splash color

#### strokeWidth:
This parameter is used to set icon stroke width

## Animated Icon stroke width sample ⬇️


![InShot_20240613_203645913](https://github.com/nikkieke/rive_animated_icons/assets/95222620/0467daca-3c9d-425a-92ca-6ef1976749cf)


## Best practices 🙌
- If a Rive animation is set to loop and is scrolled off-screen, you can disable the loop to stop the animation and conserve resources while it's not visible. Similarly, you can re-enable the loop when the animation comes back into view.


## License 📝
Rive Animated Icons is [MIT-licensed](https://github.com/nikkieke/rive_animated_icons/edit/main/LICENSE)


## Animation credits 🏆
All the icons available were animated in Rive and sourced from the Rive community files. Special thanks to all the animators!
- [@drawsgood](https://rive.app/@drawsgood/)
- [@Daniyar](https://rive.app/@Daniyar/)
- [@nikkieke001](https://rive.app/@nikkieke001/)

  
## Maintainers 🔩
- [Nikki Eke](https://github.com/nikkieke)