İçeriğe geç
TR

34 ikon · MIT lisanslı

Animasyonlu navigasyon ve ok ikonları

Kapatma düğmesine dönüşen hamburger menüler; hover’da kendi yönüne doğru hafifçe kayan oklar, chevron’lar ve köşe okları. Bir kontrolün nereye götürdüğünü açıkça gösterirler: çekmeceyi aç, geri dön, satırı genişlet, siteden çık.

34 ikondan 2 tanesi kesintisiz döngüde oynar, 4 tanesi tıklandığında iki durum arasında geçiş yapar, 6 tanesi her tıklamada baştan oynar ve 22 tanesi hover’da bir kez 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.

Navigasyon kategorisindeki tüm ikonlar

Nerede kullanılır

  • Mobilde kapatma düğmesine dönüşen hamburger menü
  • Carousel ve sayfalamada önceki ve sonraki düğmeleri
  • Accordion ve açılır menü chevron’ları
  • Başa dön ve aşağı kaydır ipuçları
  • Giriş ve çıkış bağlantıları
  • Harici bağlantı işaretleri ve kenar çubuğu açma/kapama düğmeleri

Etkileşime göre

  • Döngüsel animasyonlu ikonlar · 2

    Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. More Horizontal, More Vertical.

  • Tıklayınca durum değiştiren animasyonlu ikonlar · 4

    Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Tıklamalı animasyonlu ikonlar · 6

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

  • Hover’da oynayan animasyonlu ikonlar · 22

    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. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

Uygulamanıza ekleyin

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

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

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

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

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

<AnimatedMenu 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

Navigasyon kategorisinde hangi ikonlar var?

34 ikon: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down ve 22 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu navigasyon ve ok ikonları React’te nasıl kullanılır?

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

Bu animasyonlu navigasyon ve ok 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/menu.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.