21 icônes · interaction="hover"

Icônes animées au survol

Ces icônes se jouent vers l’avant quand le pointeur entre et en sens inverse quand il sort : le mouvement suit le curseur et ne s’arrête jamais à mi-course. Elles conviennent aux éléments de navigation et aux boutons qui annoncent ce qu’ils ouvrent : le couvercle de la corbeille se soulève, la roue crantée des réglages tourne, le dossier s’ouvre.

Toutes les icônes « survol »

Comportement

Se joue vers l’avant sur mouseenter et en sens inverse sur mouseleave.

Si la réduction des animations est activée, le survol ne déclenche pas l’animation. Sur écran tactile, un tap ne déclenche pas les animations au survol ; le focus clavier, lui, les déclenche quand l’icône se trouve dans un élément focusable. Le composant React gère tout cela : vous n’avez qu’à choisir l’icône.

Où l’utiliser

Éléments de barre latérale et de menu de navigation
Boutons de suppression qui soulèvent le couvercle avant le clic
Liens vers les réglages et le profil
Contrôles de zoom avant et arrière
Liens sociaux dans le footer

Par catégorie

Actions · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Contenu · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Réseaux sociaux · 3
Instagram, YouTube, YouTube V2

Utilisation dans React

Les icônes listées ici jouent cette interaction par défaut. Toute autre icône peut aussi l’utiliser : passez-lui la prop interaction.

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

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

Placez l’icône dans un lien ou un bouton grâce à la render prop : l’animation se joue alors aussi quand l’élément reçoit le focus clavier, et un tap sur écran tactile ne la déclenche pas.

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

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

Toutes les props sont décrites dans la documentation. En dehors de React, les icônes sont des fichiers Lottie JSON ; la page Icônes Lottie montre comment recréer les interactions avec lottie-web.

Questions fréquentes

Quelles icônes utilisent l’interaction « survol » ?

21 icônes : Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share et 6 autres. Les icônes au survol signalent typiquement les éléments de navigation, les boutons de suppression, les réglages, les contrôles de zoom et les liens sociaux.

Que se passe-t-il quand l’utilisateur a activé la réduction des animations ?

Si la réduction des animations est activée, le survol ne déclenche pas l’animation. Le composant React lit prefers-reduced-motion et se met à jour quand le réglage change : vous n’avez aucun code à écrire pour cela.

Comment changer l’interaction d’une icône ?

Chaque icône joue l’interaction pour laquelle elle a été conçue. Passez interaction="hover" pour donner ce comportement à n’importe quelle autre icône, ou une autre valeur ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') pour en changer. Les props autoplay, loop et speed règlent la lecture.