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

5 icon · Giấy phép MIT

Icon biểu đồ động

Biểu đồ cột, biểu đồ tròn và mũi tên xu hướng cho phân tích và báo cáo. Icon xu hướng tăng và giảm cho thấy ngay một chỉ số đã tăng hay giảm, rất hợp với thẻ KPI và nhật ký thay đổi các con số.

Cả 5 icon đều phát một lần khi hover. 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 biểu đồ

Dùng ở đâu

  • Thẻ KPI với chỉ số tăng hoặc giảm
  • Mục điều hướng tới trang phân tích và báo cáo
  • Trạng thái trống của dashboard
  • Tổng quan tài chính và danh mục đầu tư

Theo tương tác

  • Icon động phát khi hover · 5

    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. Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up.

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/trending-up.json
import { AnimatedTrendingUp } from '@/components/animations/trending-up';

<AnimatedTrendingUp 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 biểu đồ động gồm những icon nào?

5 icon: Bar Chart, Bar Chart 2, Pie Chart, Trending Down và Trending Up. 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 biểu đồ động này trong React như thế nào?

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

Có dùng được các icon biểu đồ độ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/trending-up.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à đủ.