Özet - İkon kümesi
SVG ile ikon kümesi kurarsın.
Özet: SVG ile ikon kümesi
Bu grupta SVG'in nasıl biçimlendiğini gördün. fill iç rengi, stroke kenar rengini, stroke-width kenar kalınlığını belirler. Bunlar CSS'in temel SVG araçlarıdır.
:hover ile ikonları canlandırdın; currentColor ile ikonları metin rengine bağladın. Şimdi bunları bir araya getirip tutarlı bir ikon kümesi kuracaksın.
Uygulama İlk ikonu biçimlendir
.icon-home seçicisi içine iki bildirim yaz: fill özelliğini #0f172a ve stroke özelliğini #475569 yap. Böylece ikonun içi koyu, kenarı açık gri olur.
Örnek çözümü göster
.icon-home seçicisini aç; fill: #0f172a; ve stroke: #475569; yaz.
Örnek çözüm:
.icon-home {
fill: #0f172a;
stroke: #475569;
}currentColor ve hover birlikte
İki aracı birleştirince güçlü bir düzen elde edersin. İkonu fill: currentColor ile metin rengine bağlarsın; sonra .icon-home:hover { color: #2563eb } yazarsın. Fare ikon üzerindeyken metin rengi mavi olur; ikon onu izler.
Bu yöntemde yalnızca color değişir; fill'i tekrar yazmazsın. Tek bir noktadan kontrol, tüm ikon setine yansır.
Uygulama İkon kümesini kur
İki bildirimi yaz: .icon seçicisi içine fill: currentColor; .icon:hover seçicisi içine color: #2563eb. Böylece tüm ikonlar metin rengini izler ve fare üzerindeyken maviye döner.
Örnek çözümü göster
.icon içine fill: currentColor; .icon:hover içine color: #2563eb; yaz.
Örnek çözüm:
.icon {
fill: currentColor;
}
.icon:hover {
color: #2563eb;
}Kendini test et
-
currentColor hover'da nasıl çalışır?
- fill her seferinde yeniden yazılır
- color değişir, ikon onu izler
- stroke otomatik değişmez
- hover currentColor'u yok sayar
Cevabı göster
color değişir, ikon onu izler — Doğru! color değişince currentColor onu izler; fill'i yeniden yazmaya gerek yok.