아이콘 37개 · interaction="click-toggle"

클릭 토글 애니메이션 아이콘

클릭할 때마다 두 상태 사이를 애니메이션으로 전환하고 그 상태에 머무는 아이콘으로, 켜기·끄기 컨트롤의 상태를 눈으로 보여 줍니다. 아이콘이 항상 현재 상태를 보여 주므로 aria-pressed나 checked 속성과 함께 쓰면 버튼만으로 의미가 전달됩니다.

동작 방식

클릭하면 두 상태 사이를 전환합니다. 동작 줄이기가 설정되어 있으면 즉시 전환됩니다.

동작 줄이기가 설정되어 있으면 클릭할 때 중간 애니메이션 없이 바로 다른 상태로 전환됩니다. 이 모든 처리는 React 컴포넌트가 맡으니, 아이콘만 고르면 됩니다.

이런 곳에 쓰세요

음소거·음소거 해제 버튼
비밀번호 표시·숨기기 필드
햄버거 메뉴와 닫기 버튼
재생·일시정지 컨트롤
좋아요·별표·북마크 토글
체크박스, 라디오 버튼, 스위치

카테고리별

알림 · 2
Notification, Notification V2
내비게이션 · 4
Burger Menu, Menu V2, Menu V3, Menu V4
액션 · 14
Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3
폼 · 3
Checkbox, Radio button, Toggle
미디어 · 10
Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume
커뮤니케이션 · 1
Phone Off
기기 · 1
Wifi Off
날씨 · 2
Cloud Off, Zap Off

React에서 사용하기

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

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

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

클릭하면 아이콘이 알아서 전환됩니다. 상태와 동기화하려면 active를 전달하세요. active가 바뀔 때마다 아이콘이 애니메이션되고, 클릭만으로는 더 이상 전환되지 않습니다.

import { useState } from 'react';
import menu from 'react-useanimations/lib/menu';

export function MenuButton() {
  const [open, setOpen] = useState(false);
  return (
    <UseAnimations
      animation={menu}
      active={open} // true면 끝 상태를 표시
      onClick={() => setOpen(!open)}
      aria-label={open ? '메뉴 닫기' : '메뉴 열기'}
    />
  );
}

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

자주 묻는 질문

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

아이콘 37개: Notification, Notification V2, Burger Menu, Menu V2, Menu V3, Menu V4, Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off 외 22개. 클릭 토글 아이콘은 주로 음소거/해제, 비밀번호 표시/숨기기, 메뉴/닫기, 재생/일시정지, 좋아요 버튼에 쓰입니다.

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

동작 줄이기가 설정되어 있으면 클릭할 때 중간 애니메이션 없이 바로 다른 상태로 전환됩니다. React 컴포넌트가 prefers-reduced-motion을 읽고 설정이 바뀌면 바로 반영하므로, 따로 코드를 작성할 필요가 없습니다.

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

모든 아이콘은 디자인된 인터랙션으로 재생됩니다. 다른 아이콘에 이 동작을 적용하려면 interaction prop에 "click-toggle" 값을 전달하고, 다른 동작으로 바꾸려면 다른 값('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay')을 전달하세요. 재생 방식은 autoplay, loop, speed props로 조정합니다. 상태를 직접 제어하려면 active={isOn}을 전달하고 onClick에서 값을 갱신하세요. 그러면 클릭만으로는 아이콘이 전환되지 않습니다.

클릭 토글 아이콘 전체

동작 방식

이런 곳에 쓰세요

카테고리별

React에서 사용하기

자주 묻는 질문