Saltar al contenido
ES

64 iconos · interaction="click-replay"

Iconos animados al hacer clic

Estos iconos se reproducen una vez desde el principio cada vez que se hace clic en ellos, como una pequeña confirmación de que la acción se completó. Encajan con acciones puntuales que no dejan un estado: enviar, guardar, actualizar, descargar, imprimir o eliminar.

Todos los iconos con la interacción “Repetir con clic”

Cómo se comporta

Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido.

Si se prefiere movimiento reducido, los clics siguen llegando a tu handler, pero la animación no se reproduce. El componente de React se encarga de todo esto; tú solo eliges el icono.

Dónde usarlos

  • Botones de enviar en formularios de chat y comentarios
  • Botones de guardar, descargar y subir
  • Botones de actualizar y girar
  • Botones de añadir al carrito
  • Botones de formato de texto en editores

Por categoría

  • Alertas · 1

    X Octagon

  • Navegación · 6

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

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

  • Contenido · 5

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

  • Multimedia · 6

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

  • Edición de texto · 8

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

  • Comunicación · 3

    Phone, Phone Call, Send

  • Dispositivos · 1

    Printer

  • Comercio electrónico · 1

    Shopping Cart

  • Diseño y maquetación · 3

    Crop, Mouse Pointer, Scissors

Úsalo en React

Los iconos de esta lista usan esta interacción por defecto, pero cualquier otro icono también puede usarla: pasa la prop interaction.

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

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

Coloca el icono dentro de un botón real con la render prop, para que pueda recibir el foco y los lectores de pantalla lo anuncien. Tu onClick se ejecuta primero; llama a event.preventDefault() para omitir la animación.

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

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

Todas las props están en la documentación. Fuera de React, los iconos son archivos Lottie JSON; en Iconos Lottie verás cómo recrear las interacciones con lottie-web.

Preguntas frecuentes

¿Qué iconos usan la interacción “Repetir con clic”?

64 iconos: 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 y 49 más. Los iconos que se animan al hacer clic suelen confirmar botones de enviar, guardar, actualizar, descargar, añadir al carrito y dar formato.

¿Qué pasa cuando el usuario prefiere movimiento reducido?

Si se prefiere movimiento reducido, los clics siguen llegando a tu handler, pero la animación no se reproduce. El componente de React lee prefers-reduced-motion y se actualiza cuando cambia el ajuste, así que no necesitas escribir código para ello.

¿Cómo cambio la interacción de un icono?

Cada icono reproduce la interacción para la que fue diseñado. Pasa interaction="click-replay" para dar este comportamiento a cualquier otro icono, u otro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para cambiarlo. Las props autoplay, loop y speed ajustan la reproducción.