Aller au contenu
FR

64 icônes · interaction="click-replay"

Icônes animées au clic

Ces icônes rejouent leur animation depuis le début à chaque clic : une petite confirmation que l’action a bien eu lieu. Elles conviennent aux actions ponctuelles qui ne laissent pas d’état derrière elles : envoyer, enregistrer, actualiser, télécharger, imprimer ou supprimer.

Toutes les icônes « relecture au clic »

Comportement

Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée.

Si la réduction des animations est activée, les clics atteignent toujours votre gestionnaire, mais l’animation ne se joue pas. Le composant React gère tout cela : vous n’avez qu’à choisir l’icône.

Où l’utiliser

  • Boutons d’envoi des formulaires de chat et de commentaire
  • Boutons d’enregistrement, de téléchargement et d’envoi de fichier
  • Boutons d’actualisation et de rotation
  • Boutons d’ajout au panier
  • Boutons de mise en forme du texte dans les éditeurs

Par catégorie

  • Alertes · 1

    X Octagon

  • Navigation · 6

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

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

  • Contenu · 5

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

  • Médias · 6

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

  • Édition de texte · 8

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

  • Communication · 3

    Phone, Phone Call, Send

  • Appareils · 1

    Printer

  • E-commerce · 1

    Shopping Cart

  • Design et mise en page · 3

    Crop, Mouse Pointer, Scissors

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

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

Placez l’icône dans un vrai bouton grâce à la render prop, pour qu’elle puisse recevoir le focus et être annoncée. Votre onClick s’exécute en premier ; appelez event.preventDefault() pour sauter l’animation.

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

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

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 « relecture au clic » ?

64 icônes : 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 et 49 autres. Les icônes au clic confirment typiquement les boutons envoyer, enregistrer, actualiser, télécharger, ajouter au panier et de mise en forme.

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

Si la réduction des animations est activée, les clics atteignent toujours votre gestionnaire, mais l’animation ne se joue pas. 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="click-replay" 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.