İçeriğe geç
TR

10 ikon · MIT lisanslı

Animasyonlu metin düzenleme ikonları

Zengin metin araç çubukları için kalın, italik, altı çizili, hizalama ve liste ikonları. Kısa bir tıklama animasyonu biçimlendirmenin uygulandığını onaylar; metnin kendisindeki değişikliğin zor fark edildiği editörlerde bu işe yarar.

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

Metin düzenleme kategorisindeki tüm ikonlar

Nerede kullanılır

  • Zengin metin editörü araç çubukları
  • Yorum ve mesaj yazma alanları
  • CMS ve blog yazısı editörleri
  • Markdown ve not alma uygulamaları
  • Tasarım araçlarında metin hizalama kontrolleri

Etkileşime göre

  • Tıklamalı animasyonlu ikonlar · 8

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline.

  • Hover’da oynayan animasyonlu ikonlar · 2

    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. Hash, List.

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

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

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

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

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

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

Metin düzenleme kategorisinde hangi ikonlar var?

10 ikon: Align Center, Align Justify, Align Left, Align Right, Bold, Hash, Italic, List, Type ve Underline. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu metin düzenleme ikonları React’te nasıl kullanılır?

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

Bu animasyonlu metin düzenleme 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/bold.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.