本文へスキップ
JA

37 個のアイコン · interaction="click-toggle"

クリックで切り替わるアニメーションアイコン

クリックするたびに 2 つの状態の間をアニメーションで移り、その状態にとどまるアイコンです。オン・オフ切り替えの見た目の部分を担います。アイコンが常に現在の状態を表すので、aria-pressed や checked 属性と組み合わせれば、ボタンの意味が自然に伝わります。

「クリックでトグル」のアイコン一覧

動作

クリックで 2 つの状態を切り替えます。モーション軽減が有効な場合はアニメーションせずに即座に切り替わります。

モーション軽減が有効な場合、クリックするとその間のアニメーションなしで、すぐにもう一方の状態に切り替わります。これらはすべて 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="click-toggle" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。状態を自分で管理したい場合は active={isOn} を渡し、onClick で更新してください。そうすると、クリックだけではアイコンは切り替わらなくなります。