64 個のアイコン · interaction="click-replay"

クリックで動くアニメーションアイコン

クリックするたびに最初から 1 回再生されるアイコンで、操作が受け付けられたことをさりげなく伝えます。送信、保存、更新、ダウンロード、印刷、削除のように、状態を残さない一度きりの操作に合います。

動作

クリックするたびに最初から 1 回再生します。モーション軽減が有効な場合は再生しません。

モーション軽減が有効な場合、クリックはハンドラーに届きますが、アニメーションは再生されません。これらはすべて React コンポーネントが処理するので、アイコンを選ぶだけで済みます。

使いどころ

チャットやコメントフォームの送信ボタン
保存・ダウンロード・アップロードボタン
更新・回転ボタン
カートに追加ボタン
エディターの書式設定ボタン

カテゴリ別

アラート · 1
X Octagon
ナビゲーション · 6
Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out
アクション · 30
Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square
コンテンツ · 5
File Minus, File Plus, Folder Minus, Folder Plus, User Check
メディア · 6
Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle
テキスト編集 · 8
Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline
コミュニケーション · 3
Phone, Phone Call, Send
デバイス · 1
Printer
EC・ショッピング · 1
Shopping Cart
デザイン・レイアウト · 3
Crop, Mouse Pointer, Scissors

React で使う

ここに並ぶアイコンは、デフォルトでこのインタラクションで再生されます。ほかのアイコンでも interaction prop を渡せば同じ動きにできます。

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

// Settings の本来のインタラクションは 'hover'
<UseAnimations animation={settings} interaction="click-replay" size={32} />

render prop を使ってアイコンを本物のボタンで包めば、フォーカスでき、スクリーンリーダーにも読み上げられます。渡した onClick が先に実行され、event.preventDefault() を呼ぶとアニメーションをスキップできます。

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

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="ダウンロード" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

すべての props はドキュメントにまとめています。React 以外では、アイコンは Lottie JSON ファイルです。lottie-web でインタラクションを再現する方法は Lottie アイコンを参照してください。

よくある質問

「クリックで再生」のインタラクションを使うアイコンは？

64 個あります。X Octagon、Arrow down circle、Arrow left circle、Arrow right circle、Arrow up circle、Log In、Log Out、Check、Check Circle、Chevron left、Chevron right、Delete、Download、Download Cloud、Download V2 ほか 49 個です。クリックで動くアイコンは、送信、保存、更新、ダウンロード、カートに追加、書式設定ボタンの操作確認によく使われます。

ユーザーがモーション軽減を設定している場合はどうなりますか？

モーション軽減が有効な場合、クリックはハンドラーに届きますが、アニメーションは再生されません。React コンポーネントが prefers-reduced-motion を読み取り、設定が変わればそれに追従するので、そのためのコードを書く必要はありません。

アイコンのインタラクションを変えるには？

どのアイコンも、デザインされたときのインタラクションで再生されます。interaction="click-replay" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。

「クリックで再生」のアイコン一覧

動作

使いどころ

カテゴリ別

React で使う

よくある質問