İçeriğe geç
TR

9 ikon · MIT lisanslı

Animasyonlu harita ve konum ikonları

Harita pinleri, navigasyon okları, küreler, hedefler ve çapalar. Hover’da düşen bir pin, mağaza bulucuyu ya da teslimat adresini öne çıkarır; küre ise dil veya bölge seçici olarak kullanılabilir.

9 ikondan 8 tanesi hover’da bir kez oynar ve 1 tanesi hover süresince döngüde oynar. Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Harita ve konum kategorisindeki tüm ikonlar

Nerede kullanılır

  • Mağaza bulucular ve adres alanları
  • Mevcut konum ve yol tarifi düğmeleri
  • Dil ve bölge seçiciler
  • Teslimat ve sipariş takibi
  • Seyahat ve rezervasyon uygulamaları

Etkileşime göre

  • Hover’da oynayan animasyonlu ikonlar · 8

    Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz. Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target.

  • Hover’da döngüye giren animasyonlu ikonlar · 1

    Hover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır. Globe.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Hover’da tekrar) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: mapPin yerine ikonun sayfasındaki adı yazın.

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

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

shadcn/ui ile CLI hazır bir bileşen ekler:

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

<AnimatedMapPin size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Harita ve konum kategorisinde hangi ikonlar var?

9 ikon: Anchor, Crosshair, Globe, Life Buoy, Map, Map Pin, Navigation, Navigation 2 ve Target. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu harita ve konum ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import mapPin from 'react-useanimations/lib/mapPin' satırını ekleyin ve <UseAnimations animation={mapPin} size={32} /> ile render edin. İkon kendi etkileşimini (Hover’da tekrar) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/map-pin.json komutunu çalıştırın.

Bu animasyonlu harita ve konum ikonları React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/map-pin.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.