İkonlar
Heroicons v2 (MIT): 324 ikon, outline ve solid stilde. Çizimler pakete gömülüdür; ikon fontu, CDN ya da ek paket gerekmez ve sayfaya yalnızca kullanılan ikon girer.
Temel kullanım
İkon name ile seçilir; adlar sayfanın sonundaki galeride listelenir. Varsayılan stil çizgili (outline) ve boyut 5 (20px) olur. Tanımsız bir ad hata verir, böylece yazım yanlışları sessizce kaybolmaz.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="home" />
<acun:icon name="map-pin" />
<acun:icon name="truck" />
<acun:icon name="users" />
<acun:icon name="document-text" />
</div>| Prop | Değerler |
|---|---|
name | Heroicons adı (ör. map-pin, truck) |
Boyutlar
size bir Tailwind size-* değeridir: 4 16px, 5 20px, 6 24px, 8 32px. Sınıf bu değerden üretildiği için uygulamanızın derlenmiş CSS'inde bulunmalıdır; paket içinde hiç geçmeyen bir değer (ör. 20) seçerseniz sınıfın üretilmesi için şablonunuzda da yazılı olması gerekir.
<div class="flex flex-wrap items-end gap-5">
<acun:icon name="bell" size="4" />
<acun:icon name="bell" />
<acun:icon name="bell" size="6" />
<acun:icon name="bell" size="8" />
<acun:icon name="bell" size="10" />
</div>| Prop | Değerler |
|---|---|
size | 4 | 5 | 6 | 8 | 10 … |
Outline ve solid
solid ikonu dolu stilde çizer. Seçili sekme, aktif durum ya da küçük boyutlarda daha iyi okunan ikonlar için kullanın; aynı listede iki stili karıştırmayın.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="star" size="6" />
<acun:icon name="star" size="6" solid class="text-amber-500" />
<acun:icon name="check-circle" size="6" />
<acun:icon name="check-circle" size="6" solid class="text-emerald-600" />
</div>| Prop | Değerler |
|---|---|
solid | true | false |
Çizgi kalınlığı
stroke yalnızca outline stilde çizgi kalınlığını belirler; varsayılan 1.8. Büyük boyutlarda ince (1.2–1.5), küçük boyutlarda kalın (2–2.5) çizgi daha dengeli görünür.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="map-pin" size="10" stroke="1.2" />
<acun:icon name="map-pin" size="10" />
<acun:icon name="map-pin" size="10" stroke="2.5" />
</div>| Prop | Değerler |
|---|---|
stroke | 1.2 | 1.5 | 1.8 | 2 | 2.5 |
Renk
İkon rengini yazı renginden (currentColor) alır. Ayrı bir renk için text-* sınıfı verin; düğme ve bağlantı içindeki ikonlar kendiliğinden onların rengine uyar.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="trash" size="6" class="text-red-600" />
<acun:icon name="check-circle" size="6" class="text-emerald-600" />
<acun:icon name="exclamation-triangle" size="6" class="text-amber-500" />
<acun:icon name="bell" size="6" class="text-brand-600 dark:text-brand-400" />
<acun:button size="sm"><acun:icon name="plus" size="4" />Yeni Sipariş</acun:button>
</div>| Prop | Değerler |
|---|---|
class | text-* renk sınıfı |
Erişilebilirlik
İkonlar varsayılan olarak ekran okuyucudan gizlenir (aria-hidden), çünkü çoğu zaman yanında bir metin vardır. Tek başına anlam taşıyan bir ikon için label verin; role="img" ve aria-label eklenir. Yalnızca ikondan oluşan düğmelerde etiketi ikona değil düğmeye (aria-label) verin.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="shield-check" size="6" label="Doğrulanmış müşteri" class="text-emerald-600" />
<acun:button variant="ghost" size="icon" aria-label="Yazdır"><acun:icon name="printer" /></acun:button>
</div>| Prop | Değerler |
|---|---|
label | Ekran okuyucuya okunacak ad |
Tüm ikonlar (324)
<acun:icon name="home" />
<acun:icon name="home" solid />Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
name | — | Zorunlu. İkon adı; tanımsız ad hata verir |
size | 5 | Tailwind size-* değeri (5 = 20px) |
solid | false | Dolu stil |
stroke | 1.8 | Çizgi kalınlığı (yalnızca outline) |
label | null | Verilirse role="img" ve aria-label; yoksa aria-hidden |