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

9 icon · Giấy phép MIT

Icon bản đồ và vị trí động

Ghim bản đồ, mũi tên chỉ đường, quả địa cầu, tâm ngắm và mỏ neo. Một chiếc ghim rơi xuống khi hover giúp trang tìm cửa hàng hay ô địa chỉ giao hàng nổi bật hơn, còn quả địa cầu dùng được làm nút chọn ngôn ngữ hoặc khu vực.

Trong 9 icon, 8 icon phát một lần khi hover và 1 icon lặp khi được 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 bản đồ & vị trí

Dùng ở đâu

  • Trang tìm cửa hàng và ô nhập địa chỉ
  • Nút vị trí hiện tại và chỉ đường
  • Bộ chọn ngôn ngữ và khu vực
  • Giao hàng và theo dõi đơn hàng
  • Ứng dụng du lịch và đặt chỗ

Theo tương tác

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

    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. Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target.

  • Icon động lặp khi hover · 1

    Lặp khi đang hover, chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi (mouseleave) và đứng yên khi người dùng bật giảm chuyển động. Globe.

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 mapPin bằng tên ghi trên trang của icon đó.

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

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

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

npx shadcn@latest add https://useanimations.com/r/map-pin.json
import { AnimatedMapPin } from '@/components/animations/map-pin';

<AnimatedMapPin 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 bản đồ và vị trí động gồm những icon nào?

9 icon: Anchor, Crosshair, Globe, Life Buoy, Map, Map Pin, Navigation, Navigation 2 và Target. 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 bản đồ và vị trí động này trong React như thế nào?

Cài react-useanimations, thêm import mapPin from 'react-useanimations/lib/mapPin' rồi render <UseAnimations animation={mapPin} 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/map-pin.json.

Có dùng được các icon bản đồ và vị trí độ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/map-pin.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à đủ.