Skip to main content
Skip table of contents

Web - LottieIcon (Added in 1.6)

Added in 1.6

Definition

정의

LottieIcon

최적화 대상

Desktop

Mobile

기획 배포

진행중

디자인 가이드 배포

진행중

개발 코드 배포

완료 (1.6.6)

Principle

LottieReactionButton에 사용되는 아이콘입니다.

Spec

Size

기본 아이콘 사이즈는 24px 입니다.
상황에 따라 12px, 16px, 20px, 24px, 32px, 48px, 56px, 64px, 72px을 사용합니다. (??)

사이즈(px)

12

16

20

24

32

48

56

64

72

 

Properties

size

크기를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

24

Enum Values Description

24

CODE 
{
width:24px;
height:24px;
}

12

CODE 
{
width:12px;
height:12px;
}

16

CODE 
{
width:16px;
height:16px;
}

20

CODE 
{
width:20px;
height:20px;
}

32

CODE 
{
width:32px;
height:32px;
}

48

CODE 
{
width:48px;
height:48px;
}

56

CODE 
{
width:56px;
height:56px;
}

64

CODE 
{
width:64px;
height:64px;
}

72

CODE 
{
width:72px;
height:72px;
}

 

iconName

ic_lottie_xx로 정의 되어 있습니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'ic_lottie_heart'

Enum Values Description

'ic_lottie_heart'

하트

'ic_lottie_thumb_up'

좋아요

'ic_lottie_confetti'

폭죽

'ic_lottie_fire'

불

'ic_lottie_sad'

슬픔

autoplayMode

자동 재생 여부를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'use'

Enum Values Description

'none'

자동 재생을 하지 않습니다.

'use'

자동 재생을 합니다.

loopMode

반복 여부를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'use'

Enum Values Description

'none'

재생시에 반복을 하지 않습니다.

'use'

재생시에 반복을 합니다.

lottieRef

lottie의 ref를 부여하여 활용할 수 있습니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

enum

Default

'use'

Enum Values Description

'none'

재생시에 반복을 하지 않습니다.

'use'

재생시에 반복을 합니다.

onComplete

LottieIcon의 loop가 끝난 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

AnimationEventHandler | null

Default

-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

  • 2022/11/23 : 구현에 필요한 prop들 추가 - 안은수

  • 2022/11/18 : 문서 최초 작성 - 김혜진

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close