아이콘 144개 · interaction="hover-replay"

호버 재생 애니메이션 아이콘

포인터가 올라오면 한 번 재생되고 스스로 끝까지 재생되는 아이콘이라, 툴바 위를 빠르게 지나가도 움직임이 산만해지지 않습니다. 화살표, 파일, 기기, 날씨, 브랜드 아이콘 등 세트의 대부분이 이렇게 호버하면 살아 움직입니다.

호버 재생 아이콘 전체

동작 방식

mouseenter에서 한 번 재생됩니다(동작 줄이기가 설정되어 있으면 재생되지 않음). 포인터가 벗어나도 멈추지 않고, 재생 중에 다시 들어와도 처음부터 다시 시작하지 않습니다.

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

이런 곳에 쓰세요

기능 목록과 요금제 표
화살표 링크와 CTA 버튼
편집기·대시보드의 툴바 버튼
랜딩 페이지 그리드의 카드
푸터와 문의 링크

카테고리별

내비게이션 · 22
Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar
액션 · 6
Award, Key, Maximize 2, Minimize 2, Shield, Slash
콘텐츠 · 10
Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users
미디어 · 11
Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV
텍스트 편집 · 2
Hash, List
커뮤니케이션 · 9
At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail
기기 · 10
Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi
날씨 · 13
Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap
지도·위치 · 8
Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target
커머스 · 10
Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck
차트 · 5
Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up
개발 · 8
Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server
디자인·레이아웃 · 7
Columns, Grid, Layers, Layout, Move, Pen Tool, Table
도형·수학 · 8
Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle
소셜 미디어 · 9
Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X
기타 · 6
Clock, Coffee, Frown, Meh, Smile, Tool

React에서 사용하기

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

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

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

아이콘만이 아니라 카드나 링크 전체에 호버하게 하세요. render prop을 쓰면 이벤트가 직접 만든 요소에 걸리고, 키보드 포커스로도 애니메이션이 재생됩니다.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> 주간 성장률
    </a>
  )}
/>

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

자주 묻는 질문

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

아이콘 144개: Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down 외 129개. 호버 재생 아이콘은 주로 화살표 링크, 기능 목록, 툴바 버튼, 랜딩 페이지 카드에 생기를 더합니다.

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

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

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

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