FLUTTER ECOSYSTEM

nikkieke/rive_animated_icons

이 Flutter 패키지는 선호도에 맞게 사용자 정의할 수 있는 rive 애니메이션 아이콘을 제공합니다.

rive_animated_icons 프로젝트 이미지
Stars
70
Forks
15
최근 푸시(UTC)
2026. 7. 25.
프로젝트 상태
활성
Nikki Eke GitHub avatar
GITHUB User

Nikki Eke ↗

Software Engineer (Mobile) ~ Technical Writer ~ Rive Ambassador

Remote
언어HTMLDartShellRubySwiftKotlinObjective-C

기술 주제

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 4 개
  • flutter{"sdk":"flutter"}
  • rive^0.14.6
  • flutter_test개발 의존성{"sdk":"flutter"}
  • very_good_analysis개발 의존성^5.0.0+1

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

RiveAnimatedIcons - 50+ Icons Available! 🚀

https://img.shields.io/badge/platform-android-blue https://img.shields.io/badge/platform-iOS-blue https://img.shields.io/badge/platform-web-blue MIT License

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

Icons Sample ⬇️

rac-demo

Example


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

splashFactory:

This parameter is used to set icon splashFactory

mouseCursor:

This parameter is used to set icon mouseCursor when hovered

enableAbsorbPointer:

When this parameter is set to true it disables all interactive features of the icon

Animated Icon stroke width sample ⬇️

InShot_20240613_203645913

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

Animation credits 🏆

All the icons available were animated in Rive and sourced from the Rive community files. Special thanks to all the animators!

Maintainers 🔩