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; }