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

4 icon · Giấy phép MIT

Icon chuông thông báo động

Icon chuông rung lên khi có hoạt động mới, hoặc chuyển qua lại giữa chuông và chuông tắt tiếng. Một cú lắc nhẹ của chiếc chuông kéo ánh mắt về số tin chưa đọc, còn các phiên bản bật/tắt có thể dùng luôn làm nút tắt thông báo cho một kênh hay một luồng thảo luận.

Trong 4 icon, 2 icon lặp liên tục và 2 icon chuyển giữa hai trạng thái khi click. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon thông báo

Dùng ở đâu

  • Nút trung tâm thông báo trên header ứng dụng
  • Badge tin chưa đọc rung lên khi có tin nhắn mới
  • Nút bật/tắt thông báo cho một kênh hoặc luồng thảo luận
  • Cài đặt thông báo email và push
  • Nút đăng ký nhắc nhở và cảnh báo

Theo tương tác

  • Icon động lặp liên tục · 2

    Phát liên tục; đứng yên ở khung hình tĩnh đầu tiên khi người dùng bật giảm chuyển động. Notification V3, Notification V4.

  • Icon động bật/tắt khi click · 2

    Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động. Notification, Notification V2.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Click bật/tắt” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay notification bằng tên ghi trên trang của icon đó.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import notification from 'react-useanimations/lib/notification';

<UseAnimations animation={notification} size={32} />

Với shadcn/ui, CLI sẽ thêm sẵn một component:

npx shadcn@latest add https://useanimations.com/r/notification.json
import { AnimatedNotification } from '@/components/animations/notification';

<AnimatedNotification size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

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

Bộ icon chuông thông báo động gồm những icon nào?

4 icon: Notification, Notification V2, Notification V3 và Notification V4. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon chuông thông báo động này trong React như thế nào?

Cài react-useanimations, thêm import notification from 'react-useanimations/lib/notification' rồi render <UseAnimations animation={notification} size={32} />. Icon sẽ chạy tương tác “Click bật/tắt” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/notification.json.

Có dùng được các icon chuông thông báo động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/notification.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.