SVG ikonları

SVG ile ikon sistemini öğrenirsin.

İkon olarak SVG

Bir ikon seti kurmanın modern yolu, her ikonu satır içi SVG olarak HTML'e gömmektir. Bu yöntem ikonu bir yazı tipi karakteri gibi kullanılır ama piksel değil vektör kalitesi verir.

Avantajları: ikonlar fill ve stroke ile anında renk değiştirir, hover'a yanıt verir, ek dosya isteği yapmaz. Üstelik ekran okuyucu için aria-hidden gibi erişilebilirlik öznitelikleri eklenir.

İkon sistemi kurmak

Bir ikon sistemi, tutarlı sınıf adları ve ortak stillerle çalışır. Her ikona class="icon" verirsin; ortak boyut .icon { width: 1.5em; height: 1.5em } ile ayarlanır. Böylece ikonlar metin hizasına otomatik uyar.

Renk için fill: currentColor kullanırsan, ikonlar üst öğenin rengini izler. Tek bir yerde rengi değiştirirsin; tüm ikon seti güncellenir.

Uygulama İkon sistemini kur

.icon seçicisi içine üç bildirim yaz: width: 1.5em, height: 1.5em ve fill: currentColor. Böylece tüm ikonlar aynı boyutta olur ve metin rengini izler.

Örnek çözümü göster

.icon seçicisini aç; içine width: 1.5em; height: 1.5em; fill: currentColor; yaz.
Örnek çözüm:
.icon {
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
}

Erişilebilir ikonlar

Süs amaçlı ikonlar ekran okuyucu için gizlenmelidir; yoksa gereksiz yere okunurlar. Bunun için aria-hidden="true" özniteliğini SVG'ye eklersin.

Anlam taşıyan ikonlar ise farklı yol izler: <title> öğesi ile ikonun adını yazarsın ve role="img" ile görüntü olarak işaretlersin. Böylece ekran okuyucu ikonu doğru biçimde okur.

Uygulama Hover'da ikonu vurgula

.icon:hover seçicisi içine iki bildirim yaz: fill özelliğini #dc2626 ve stroke-width özelliğini 2 yap. Fare ikon üzerindeyken hem renk hem çizgi değişir.

Örnek çözümü göster

.icon:hover seçicisini aç; fill: #dc2626; ve stroke-width: 2; yaz.
Örnek çözüm:
.icon:hover {
  fill: #dc2626;
  stroke-width: 2;
}

Kendini test et

Satır içi SVG ikonun avantajı nedir?
- Yalnızca tek bir renk alır
- Her seferinde dosya indirir
- CSS ile renk değiştirir
- Tarayıcı dışında açılır
Cevabı göster

CSS ile renk değiştirir — Doğru! Satır içi SVG'nin her öğesine CSS erişir; renk anında değişir.

İkon sınıfına ortak boyut ver

.icon {
  width: 1.5em;
  ____: 1.5em;
}

Cevabı göster

.icon {
  width: 1.5em;
  height: 1.5em;
}

Sıradaki ders: Özet - İkon kümesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler