Pular para o conteúdo
PT

144 ícones · interaction="hover-replay"

Ícones animados que tocam no hover

Estes ícones tocam uma vez quando o ponteiro entra e terminam sozinhos, o que evita que passadas rápidas por uma barra de ferramentas virem um movimento nervoso. A maior parte do conjunto funciona assim: setas, arquivos, dispositivos, clima e ícones de marcas que ganham vida no hover.

Todos os ícones com a interação “Reproduzir no hover”

Como funciona

Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia.

Com movimento reduzido, o hover não toca a animação. Toques em telas sensíveis ao toque não iniciam animações de hover; já o foco pelo teclado inicia, quando o ícone está dentro de um elemento focável. O componente React cuida de tudo isso; você só escolhe o ícone.

Onde usar

  • Listas de recursos e tabelas de preços
  • Links com seta e botões de call to action
  • Botões de barras de ferramentas em editores e dashboards
  • Cards numa grade de landing page
  • Links de rodapé e de contato

Por categoria

  • Navegação · 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

  • Ações · 6

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

  • Conteúdo · 10

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

  • Mídia · 11

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

  • Edição de texto · 2

    Hash, List

  • Comunicação · 9

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

  • Dispositivos · 10

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

  • Clima · 13

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

  • Mapas e localização · 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

  • Gráficos · 5

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

  • Desenvolvimento · 8

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

  • Design e layout · 7

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

  • Formas e matemática · 8

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

  • Redes sociais · 9

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

  • Outros · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

Use no React

Os ícones listados aqui usam esta interação por padrão. Qualquer outro ícone também pode usá-la: basta passar a prop interaction.

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

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

Faça o hover valer para o card ou o link inteiro, não só para o ícone: com a render prop, os eventos ficam no seu elemento, e o foco pelo teclado também toca a animação.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Crescimento semanal
    </a>
  )}
/>

Todas as props estão na documentação. Fora do React, os ícones são arquivos Lottie JSON; a página Ícones Lottie mostra como recriar as interações com lottie-web.

Perguntas frequentes

Quais ícones usam a interação “Reproduzir no hover”?

144 ícones: 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 e mais 129. Ícones que tocam no hover costumam dar vida a links com seta, listas de recursos, botões de barras de ferramentas e cards de landing page.

O que acontece quando o usuário prefere movimento reduzido?

Com movimento reduzido, o hover não toca a animação. O componente React lê prefers-reduced-motion e se atualiza quando a configuração muda, então você não precisa escrever nenhum código para isso.

Como mudo a interação de um ícone?

Cada ícone executa a interação para a qual foi desenhado. Passe interaction="hover-replay" para dar esse comportamento a qualquer outro ícone, ou outro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para trocá-la. As props autoplay, loop e speed ajustam a reprodução.