아이콘 21개 · interaction="hover"

호버 애니메이션 아이콘

포인터가 올라오면 정방향으로 재생되고 벗어나면 역방향으로 되돌아가는 아이콘입니다. 움직임이 커서를 따라가므로 중간에 어색하게 끊기지 않습니다. 휴지통 뚜껑이 열리고, 설정 톱니바퀴가 돌고, 폴더가 열리듯 무엇을 여는지 암시하는 내비게이션 항목과 버튼에 어울립니다.

호버 아이콘 전체

동작 방식

mouseenter에서 정방향으로, mouseleave에서 역방향으로 재생됩니다.

동작 줄이기가 설정되어 있으면 호버해도 애니메이션이 재생되지 않습니다. 터치스크린에서 탭해도 호버 애니메이션은 시작되지 않으며, 아이콘이 포커스 가능한 요소 안에 있으면 키보드 포커스로도 재생됩니다. 이 모든 처리는 React 컴포넌트가 맡으니, 아이콘만 고르면 됩니다.

이런 곳에 쓰세요

사이드바와 내비게이션 메뉴 항목
클릭 전에 뚜껑이 열리는 삭제 버튼
설정·프로필 링크
확대·축소 컨트롤
푸터의 소셜 링크

카테고리별

액션 · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
콘텐츠 · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
소셜 미디어 · 3
Instagram, YouTube, YouTube V2

React에서 사용하기

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

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

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

render prop으로 아이콘을 링크나 버튼 안에 넣으세요. 그러면 요소가 키보드 포커스를 받을 때도 애니메이션이 재생되고, 터치스크린에서 탭해도 재생되지 않습니다.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> 보관
    </a>
  )}
/>

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

자주 묻는 질문

호버 인터랙션을 쓰는 아이콘은 무엇인가요?

아이콘 21개: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share 외 6개. 호버 아이콘은 주로 내비게이션 항목, 삭제 버튼, 설정, 확대·축소 컨트롤, 소셜 링크에 쓰입니다.

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

동작 줄이기가 설정되어 있으면 호버해도 애니메이션이 재생되지 않습니다. React 컴포넌트가 prefers-reduced-motion을 읽고 설정이 바뀌면 바로 반영하므로, 따로 코드를 작성할 필요가 없습니다.

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

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