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

5 icon · Giấy phép MIT

Icon cảnh báo động

Tam giác cảnh báo, vòng tròn báo lỗi và biển dừng, nhấp nháy vừa đủ để gây chú ý mà không chói mắt. Hãy đặt chúng cạnh một trường form bị lỗi, ở đầu banner báo lỗi hoặc trong cột trạng thái, những chỗ mà icon tĩnh rất dễ bị lướt qua.

Trong 5 icon, 4 icon lặp liên tục và 1 icon phát lại sau mỗi lần 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 cảnh báo

Dùng ở đâu

  • Lỗi validate ngay dưới các trường form
  • Banner lỗi và cảnh báo ở đầu trang
  • Các dòng thất bại trong bảng trạng thái deploy hoặc job
  • Hộp thoại xác nhận hành động không thể hoàn tác
  • Trang trạng thái hệ thống khi đang có sự cố

Theo tương tác

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

    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. Alert circle, Alert octagon, Alert triangle, Error.

  • Icon động khi click · 1

    Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động. X Octagon.

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 “Lặp” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay alertTriangle bằng tên ghi trên trang của icon đó.

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle 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 cảnh báo động gồm những icon nào?

5 icon: Alert circle, Alert octagon, Alert triangle, Error và X Octagon. 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 cảnh báo động này trong React như thế nào?

Cài react-useanimations, thêm import alertTriangle from 'react-useanimations/lib/alertTriangle' rồi render <UseAnimations animation={alertTriangle} size={32} />. Icon sẽ chạy tương tác “Lặp” 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/alert-triangle.json.

Có dùng được các icon cảnh 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/alert-triangle.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). Error dùng expression của After Effects, nên trên web cần bản đầy đủ của lottie-web.