6 種類のインタラクション · 300 個のアイコン

アニメーションアイコンのインタラクション

どのアイコンにも、デザイン時に想定したマイクロインタラクションが付いています。ループする、クリックで切り替わる、クリックでもう一度再生する、ホバーで再生する、のいずれかです。React コンポーネントがその仕組みを組み込み、モーション軽減の設定も尊重します。interaction prop を使えば、どのアイコンも別のインタラクションに切り替えられます。

インタラクションの選び方

続いている状態（読み込み中や継続中のアラートなど）：ループ。
オン・オフの操作（ミュート、メニュー、パスワード表示など）：クリックでトグル。状態を自分で管理するなら active を使います。
一度きりの操作（送信、保存、更新など）：クリックで再生。
リンク先を予告するヒント：ホバー。ポインターが離れると逆再生します。
ポインターがさっと横切るツールバーやリスト：ホバーで再生。最後まで自動で再生しきります。
じっくり見てほしいリンク（SNS アイコンなど）：ホバーでループ。

モーション軽減

React コンポーネントは prefers-reduced-motion に従い、設定が変わるとそれに追従します。タッチスクリーンでのタップでホバーアニメーションが始まることはありません。

loop: アイコンは自動再生されず、静止した最初のフレームのままです。
click-toggle: クリックすると、その間のアニメーションなしで、すぐにもう一方の状態に切り替わります。
click-replay: クリックはハンドラーに届きますが、アニメーションは再生されません。
hover: ホバーしてもアニメーションは再生されません。
hover-replay: ホバーしてもアニメーションは再生されません。
hover-loop: ホバー中もアイコンは静止したままです。