21 Icons · interaction="hover"

Animierte Hover-Icons

Diese Icons spielen vorwärts, wenn der Mauszeiger sie erreicht, und rückwärts, wenn er sie verlässt. Die Bewegung folgt also dem Cursor und bleibt nie auf halber Strecke hängen. Sie passen zu Navigationspunkten und Buttons, die andeuten, was sie öffnen: Der Papierkorbdeckel hebt sich, das Zahnrad dreht sich, der Ordner geht auf.

Alle Icons mit Hover

So verhält es sich

Spielt bei mouseenter vorwärts und bei mouseleave rückwärts.

Ist reduzierte Bewegung eingestellt, spielt Hover die Animation nicht ab. Tippen auf Touchscreens startet keine Hover-Animation; der Tastaturfokus dagegen schon, wenn das Icon in einem fokussierbaren Element steckt. All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.

Einsatzmöglichkeiten

Einträge in Sidebar und Navigationsmenü
Löschen-Buttons, die schon vor dem Klick den Deckel heben
Links zu Einstellungen und Profil
Steuerelemente zum Vergrößern und Verkleinern
Social-Links im Footer

Nach Kategorie

Aktionen · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Inhalte · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Social Media · 3
Instagram, YouTube, YouTube V2

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 bookmark from 'react-useanimations/lib/bookmark';

// Bookmark nutzt normalerweise 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />

Setzen Sie das Icon mit dem render-Prop in einen Link oder Button: Dann spielt die Animation auch, wenn das Element den Tastaturfokus erhält, und Tippen auf Touchscreens löst sie nicht aus.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Archiv
    </a>
  )}
/>

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 „Hover“?

21 Icons: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share und 6 weitere. Hover-Icons kennzeichnen typischerweise Navigationspunkte, Löschen-Buttons, Einstellungen, Zoom-Steuerelemente und Social-Links.

Was passiert, wenn reduzierte Bewegung eingestellt ist?

Ist reduzierte Bewegung eingestellt, spielt Hover die Animation 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="hover" 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.