İçeriğe geç
TR

10 ikon · MIT lisanslı

Animasyonlu tasarım ve yerleşim ikonları

Editörler ve sayfa oluşturucular için grid, sütun, katman, kırpma, kalem aracı ve imleç ikonları. Kullanıcıların içerik düzenlediği, grid ile tablo görünümü arasında geçtiği ya da bir çizim aracı seçtiği araç çubuklarına uyar.

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

Tasarım ve yerleşim kategorisindeki tüm ikonlar

Nerede kullanılır

  • Grid, liste ve tablo görünümü geçişleri
  • Tasarım ve sunum araçlarında katman panelleri
  • Görsel editörlerde kırpma ve kesme araçları
  • Sayfa oluşturucular ve yerleşim seçiciler
  • Sürükleyerek taşıma tutamaçları

Etkileşime göre

  • Tıklamalı animasyonlu ikonlar · 3

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Crop, Mouse Pointer, Scissors.

  • Hover’da oynayan animasyonlu ikonlar · 7

    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. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

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

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

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

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

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

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

Tasarım ve yerleşim kategorisinde hangi ikonlar var?

10 ikon: Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors ve Table. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu tasarım ve yerleşim ikonları React’te nasıl kullanılır?

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

Bu animasyonlu tasarım ve yerleşim 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/layers.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.