İçeriğe geç
TR

5 ikon · MIT lisanslı

Animasyonlu grafik ikonları

Analitik ve raporlama için sütun grafikler, bir pasta grafik ve trend okları. Yükselen ve düşen trend ikonları bir metriğin arttığını mı azaldığını mı tek bakışta gösterir; KPI kartlarına ve sayı değişikliklerinin listelendiği sayfalara uyar.

5 ikonun tamamı 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.

Grafikler kategorisindeki tüm ikonlar

Nerede kullanılır

  • Yükselen ya da düşen metrikleri gösteren KPI kartları
  • Analitik ve rapor menü öğeleri
  • Dashboard’ların boş durumları
  • Finans ve portföy özetleri

Etkileşime göre

  • Hover’da oynayan animasyonlu ikonlar · 5

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

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: trendingUp yerine ikonun sayfasındaki adı yazın.

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

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

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

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

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

Grafikler kategorisinde hangi ikonlar var?

5 ikon: Bar Chart, Bar Chart 2, Pie Chart, Trending Down ve Trending Up. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu grafik ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import trendingUp from 'react-useanimations/lib/trendingUp' satırını ekleyin ve <UseAnimations animation={trendingUp} 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/trending-up.json komutunu çalıştırın.

Bu animasyonlu grafik 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/trending-up.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.