Chuyển đến nội dung chính
VI

144 icon · interaction="hover-replay"

Icon động phát khi hover

Những icon này phát một lần khi con trỏ đi vào và tự chạy hết, nhờ vậy việc lướt chuột nhanh qua thanh công cụ không biến thành một loạt chuyển động giật cục. Phần lớn bộ icon hoạt động theo cách này: mũi tên, tệp, thiết bị, thời tiết và icon thương hiệu bừng lên khi hover.

Tất cả icon tương tác “Hover phát lại”

Cách hoạt động

Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại.

Khi người dùng bật giảm chuyển động, hover không phát hiệu ứng. Chạm trên màn hình cảm ứng không kích hoạt hiệu ứng hover, còn focus bằng bàn phím thì có, nếu icon nằm trong một phần tử có thể focus. React component lo hết những việc này; bạn chỉ cần chọn icon.

Dùng ở đâu

  • Danh sách tính năng và bảng giá
  • Liên kết mũi tên và nút kêu gọi hành động
  • Nút trên thanh công cụ của trình soạn thảo và dashboard
  • Thẻ trong lưới của landing page
  • Liên kết ở footer và trang liên hệ

Theo danh mục

  • Điều hướng · 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

  • Thao tác · 6

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

  • Nội dung · 10

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

  • Đa phương tiện · 11

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

  • Soạn thảo văn bản · 2

    Hash, List

  • Liên lạc · 9

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

  • Thiết bị · 10

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

  • Thời tiết · 13

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

  • Bản đồ & vị trí · 8

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

  • Thương mại · 10

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

  • Biểu đồ · 5

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

  • Lập trình · 8

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

  • Thiết kế & bố cục · 7

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

  • Hình khối & toán học · 8

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

  • Mạng xã hội · 9

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

  • Khác · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

Dùng trong React

Các icon liệt kê ở đây mặc định chạy tương tác này. Icon khác cũng dùng được: chỉ cần truyền prop interaction.

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

// Settings mặc định dùng 'hover'
<UseAnimations animation={settings} interaction="hover-replay" size={32} />

Cho cả thẻ hoặc cả link nhận hover, không chỉ riêng icon: với render prop, các sự kiện được gắn vào phần tử của bạn, và focus bằng bàn phím cũng phát hiệu ứng.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Tăng trưởng tuần
    </a>
  )}
/>

Tất cả prop đều có trong tài liệu. Ngoài React, các icon là tệp Lottie JSON; trang Icon Lottie hướng dẫn cách tái tạo các tương tác bằng lottie-web.

Câu hỏi thường gặp

Những icon nào dùng tương tác “Hover phát lại”?

144 icon: 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 và 129 icon khác. Icon phát khi hover thường làm sinh động liên kết mũi tên, danh sách tính năng, nút trên thanh công cụ và thẻ trên landing page.

Điều gì xảy ra khi người dùng bật giảm chuyển động?

Khi người dùng bật giảm chuyển động, hover không phát hiệu ứng. React component tự đọc prefers-reduced-motion và cập nhật ngay khi thiết lập này thay đổi, nên bạn không cần viết thêm code nào.

Làm sao đổi tương tác của một icon?

Mỗi icon chạy tương tác mà nó được thiết kế cho. Truyền interaction="hover-replay" để icon khác cũng có hành vi này, hoặc một giá trị khác ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') để đổi sang tương tác tương ứng. Các prop autoplay, loop và speed điều chỉnh cách phát.