İçeriğe geç
TR

11 ikon · MIT lisanslı

Animasyonlu e-ticaret ikonları

Online mağazalar için alışveriş sepetleri, çantalar, fiyat etiketleri, hediyeler, kredi kartları ve kargo kamyonları. Sepete ekle animasyonu tıklamayı bir toast’a gerek kalmadan onaylar; kamyon ve paket ikonları da sipariş durumuna biraz hayat katar.

11 ikondan 1 tanesi her tıklamada baştan oynar ve 10 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.

E-ticaret kategorisindeki tüm ikonlar

Nerede kullanılır

  • Ürün kartlarında sepete ekle düğmeleri
  • Mağaza başlığında sepet ve çanta düğmeleri
  • Ödeme adımı ve ödeme yöntemi seçimi
  • İndirim, kupon ve kampanya rozetleri
  • Kargo ve sipariş takibi adımları
  • Hediye kartları ve hediye paketi seçenekleri

Etkileşime göre

  • Tıklamalı animasyonlu ikonlar · 1

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Shopping Cart.

  • Hover’da oynayan animasyonlu ikonlar · 10

    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. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

Uygulamanıza ekleyin

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/shopping-cart.json
import { AnimatedShoppingCart } from '@/components/animations/shopping-cart';

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

E-ticaret kategorisinde hangi ikonlar var?

11 ikon: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag ve Truck. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu e-ticaret ikonları React’te nasıl kullanılır?

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

Bu animasyonlu e-ticaret 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/shopping-cart.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.