아이콘 64개 · interaction="click-replay"

클릭 애니메이션 아이콘

클릭할 때마다 처음부터 한 번 재생되어, 동작이 처리됐음을 작게 확인해 주는 아이콘입니다. 보내기, 저장, 새로고침, 다운로드, 인쇄, 삭제처럼 상태를 남기지 않는 일회성 동작에 어울립니다.

동작 방식

클릭할 때마다 처음부터 한 번 재생됩니다. 동작 줄이기가 설정되어 있으면 재생되지 않습니다.

동작 줄이기가 설정되어 있으면 클릭은 여전히 핸들러에 전달되지만 애니메이션은 재생되지 않습니다. 이 모든 처리는 React 컴포넌트가 맡으니, 아이콘만 고르면 됩니다.

이런 곳에 쓰세요

채팅·댓글 폼의 보내기 버튼
저장·다운로드·업로드 버튼
새로고침·회전 버튼
장바구니 담기 버튼
편집기의 텍스트 서식 버튼

카테고리별

경고 · 1
X Octagon
내비게이션 · 6
Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out
액션 · 30
Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square
콘텐츠 · 5
File Minus, File Plus, Folder Minus, Folder Plus, User Check
미디어 · 6
Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle
텍스트 편집 · 8
Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline
커뮤니케이션 · 3
Phone, Phone Call, Send
기기 · 1
Printer
커머스 · 1
Shopping Cart
디자인·레이아웃 · 3
Crop, Mouse Pointer, Scissors

React에서 사용하기

여기에 있는 아이콘은 기본적으로 이 인터랙션으로 재생됩니다. 다른 아이콘도 interaction prop을 전달하면 같은 인터랙션을 쓸 수 있습니다.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings의 기본 인터랙션은 'hover'
<UseAnimations animation={settings} interaction="click-replay" size={32} />

render prop으로 아이콘을 실제 버튼 안에 넣으면 포커스를 받을 수 있고 스크린 리더도 읽어 줍니다. 직접 작성한 onClick이 먼저 실행되며, event.preventDefault()를 호출하면 애니메이션을 건너뜁니다.

import download from 'react-useanimations/lib/download';

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="다운로드" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

모든 props는 문서에 정리되어 있습니다. React 밖에서는 아이콘이 Lottie JSON 파일이며, lottie-web으로 인터랙션을 재현하는 방법은 Lottie 아이콘 페이지에서 볼 수 있습니다.

자주 묻는 질문

클릭 재생 인터랙션을 쓰는 아이콘은 무엇인가요?

아이콘 64개: X Octagon, Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out, Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 외 49개. 클릭 아이콘은 주로 보내기, 저장, 새로고침, 다운로드, 장바구니 담기, 서식 버튼의 동작을 확인해 줍니다.

사용자가 동작 줄이기를 설정했다면 어떻게 되나요?

동작 줄이기가 설정되어 있으면 클릭은 여전히 핸들러에 전달되지만 애니메이션은 재생되지 않습니다. React 컴포넌트가 prefers-reduced-motion을 읽고 설정이 바뀌면 바로 반영하므로, 따로 코드를 작성할 필요가 없습니다.

아이콘의 인터랙션은 어떻게 바꾸나요?

모든 아이콘은 디자인된 인터랙션으로 재생됩니다. 다른 아이콘에 이 동작을 적용하려면 interaction prop에 "click-replay" 값을 전달하고, 다른 동작으로 바꾸려면 다른 값('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay')을 전달하세요. 재생 방식은 autoplay, loop, speed props로 조정합니다.

클릭 재생 아이콘 전체

동작 방식

이런 곳에 쓰세요

카테고리별

React에서 사용하기

자주 묻는 질문