Aller au contenu
FR

144 icônes · interaction="hover-replay"

Icônes animées à lecture au survol

Ces icônes se jouent une fois quand le pointeur entre et vont au bout d’elles-mêmes, ce qui évite qu’un passage rapide sur une barre d’outils ne produise un mouvement saccadé. C’est le cas de la majorité du jeu d’icônes : flèches, fichiers, appareils, météo et logos de marques qui s’animent au survol.

Toutes les icônes « lecture au survol »

Comportement

Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas.

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

  • Listes de fonctionnalités et grilles tarifaires
  • Liens fléchés et boutons d’appel à l’action
  • Boutons de barre d’outils dans les éditeurs et les tableaux de bord
  • Cartes dans la grille d’une landing page
  • Liens du footer et de contact

Par catégorie

  • Navigation · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • Actions · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • Contenu · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • Médias · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • Édition de texte · 2

    Hash, List

  • Communication · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • Appareils · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • Météo · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • Cartes et localisation · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • E-commerce · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • Graphiques · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • Développement · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • Design et mise en page · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • Formes et maths · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • Réseaux sociaux · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • Autres · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

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="hover-replay" size={32} />

Déclenchez l’animation au survol de toute la carte ou de tout le lien, pas seulement de l’icône : avec la render prop, les événements sont posés sur votre élément, et le focus clavier lance aussi l’animation.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Croissance hebdomadaire
    </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 « lecture au survol » ?

144 icônes : Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down et 129 autres. Les icônes à lecture au survol animent typiquement les liens fléchés, les listes de fonctionnalités, les boutons de barre d’outils et les cartes de landing page.

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-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.