Zum Inhalt springen
DE

64 Icons · interaction="click-replay"

Animierte Icons mit Klick-Animation

Diese Icons spielen bei jedem Klick einmal von vorn ab, als kleine Bestätigung, dass die Aktion angekommen ist. Sie passen zu einmaligen Aktionen, die keinen Zustand hinterlassen: senden, speichern, aktualisieren, herunterladen, drucken oder löschen.

Alle Icons mit Klick-Replay

So verhält es sich

Spielt bei jedem Klick einmal von vorn ab, außer bei reduzierter Bewegung.

Ist reduzierte Bewegung eingestellt, erreichen Klicks weiterhin Ihren Handler, die Animation spielt aber nicht ab. All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.

Einsatzmöglichkeiten

  • Senden-Buttons in Chat- und Kommentarformularen
  • Buttons zum Speichern, Herunterladen und Hochladen
  • Buttons zum Aktualisieren und Drehen
  • In-den-Warenkorb-Buttons
  • Formatierungs-Buttons in Editoren

Nach Kategorie

  • Warnungen · 1

    X Octagon

  • Navigation · 6

    Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out

  • Aktionen · 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

  • Inhalte · 5

    File Minus, File Plus, Folder Minus, Folder Plus, User Check

  • Medien · 6

    Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle

  • Textbearbeitung · 8

    Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline

  • Kommunikation · 3

    Phone, Phone Call, Send

  • Geräte · 1

    Printer

  • E-Commerce · 1

    Shopping Cart

  • Design & Layout · 3

    Crop, Mouse Pointer, Scissors

In React verwenden

Die hier aufgeführten Icons spielen diese Interaktion standardmäßig ab. Jedes andere Icon kann sie ebenfalls nutzen: Übergeben Sie dazu das Prop interaction.

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

// Settings nutzt normalerweise 'hover'
<UseAnimations animation={settings} interaction="click-replay" size={32} />

Setzen Sie das Icon mit dem render-Prop in einen echten Button, damit es fokussierbar ist und von Screenreadern angesagt wird. Ihr onClick läuft zuerst; mit event.preventDefault() lassen Sie die Animation aus.

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

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Herunterladen" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

Alle Props stehen in der Dokumentation. Außerhalb von React sind die Icons Lottie-JSON-Dateien; unter Lottie-Icons sehen Sie, wie Sie die Interaktionen mit lottie-web nachbauen.

Häufige Fragen

Welche Icons nutzen die Interaktion „Klick-Replay“?

64 Icons: 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 und 49 weitere. Icons mit Klick-Animation bestätigen typischerweise Buttons zum Senden, Speichern, Aktualisieren, Herunterladen, Formatieren und für den Warenkorb.

Was passiert, wenn reduzierte Bewegung eingestellt ist?

Ist reduzierte Bewegung eingestellt, erreichen Klicks weiterhin Ihren Handler, die Animation spielt aber nicht ab. Die React-Komponente liest prefers-reduced-motion aus und reagiert, sobald sich die Einstellung ändert. Sie brauchen dafür keinen eigenen Code.

Wie ändere ich die Interaktion eines Icons?

Jedes Icon spielt die Interaktion ab, für die es gestaltet wurde. Mit interaction="click-replay" bekommt jedes andere Icon dieses Verhalten, mit einem anderen Wert ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ein anderes. Die Props autoplay, loop und speed steuern die Wiedergabe.