Bir ikon setini seçtikten sonra ikinci soru, ikonları sayfaya nasıl koyacağınızdır. Dört yaygın yöntem var ve her birinin hız, erişilebilirlik, ziyaretçi gizliliği ve lisans notunun yeri açısından farklı sonuçları olur. Bu yazıda yöntemleri sırayla anlatıyor, sonunda hangisinin hangi projeye uyduğunu tartışıyoruz.
1. Satır içi SVG
İkonun SVG kodunu doğrudan HTML’in içine yazarsınız. Iconify’ın kullanım belgesi bu yolu “SVG in HTML” başlığıyla anar ve Astro ya da Unplugin gibi araçların derleme sırasında bunu otomatik yapabildiğini listeler.
Artıları: Ek dosya isteği yoktur. İkon, sayfa yüklenir yüklenmez görünür. CSS ile rengini (currentColor sayesinde yazı rengini), boyutunu ve çizgi kalınlığını değiştirebilirsiniz.
Eksileri: Aynı ikonu sayfada yirmi kez kullanırsanız kod yirmi kez tekrar eder. Çok renkli ikonlarda SVG içinde id değerleri varsa, aynı sayfadaki iki ikonun idleri çakışabilir ve renk geçişleri bozulabilir; bu yüzden derleme aracının idleri benzersiz yapması gerekir.
Lisans notu: İkonun kodu sizin kaynak dosyalarınızın içindedir. Setin lisans dosyasını kaynak deponuzda tutmak, MIT, ISC ve Apache 2.0 gibi lisansların dağıtım şartı için makul bir karşılıktır. CC BY setlerde görünür atıf ayrıca gerekir.
2. SVG sprite ve use öğesi
Bütün ikonları tek bir SVG dosyasında symbol öğeleri olarak toplar, sayfada her ikonu use öğesiyle çağırırsınız. MDN’e göre use öğesi bir SVG belgesinin içindeki düğümleri alır ve başka bir yerde çoğaltır; etkisi, düğümlerin görünmeyen bir DOM’a derinlemesine kopyalanıp use öğesinin bulunduğu yere yapıştırılması gibidir.
Artıları: İkonun kodu bir kez yazılır, istediğiniz kadar çağrılır. Sprite dosyası tarayıcı önbelleğine alınır.
Eksileri: MDN, tarayıcıların güvenlik nedeniyle use öğesine aynı köken (same-origin) kuralını uygulayabileceğini ve başka bir alan adındaki dosyayı yüklemeyi reddedebileceğini belirtir; şu anda use için bir köken politikası tanımlamanın yolu yoktur. Yani sprite dosyasını bir CDN’de değil, kendi alan adınızda barındırmanız gerekir. MDN ayrıca xlink:href özniteliğinin SVG 2 ile eskidiğini, yerine href kullanılması gerektiğini not eder.
Lisans notu: Sprite dosyası, ikonların bir kopyasıdır. Dosyanın başına bir yorum olarak setin adını, telif satırını ve lisansını yazmak, notu ikonlarla aynı dosyada tutmanın en temiz yoludur.
3. İkon fontu
Her ikon bir yazı tipindeki bir karaktere yerleştirilir ve CSS sınıflarıyla gösterilir. Material Symbols bu yolun en güncel örneğidir. Google’ın geliştirici rehberi, değişken yazı tipini yüklemeyi Material Symbols’ı web projelerine eklemenin en kolay yolu olarak tarif eder. Aynı rehber, yazı tipi isteğine yalnız kullanılan ikonların adlarını ekleyerek bir alt küme indirmenin mümkün olduğunu da anlatır; birkaç ikon kullanan bir sayfa için indirilen dosya, tüm seti içeren yazı tipinin küçük bir kesrine iner.
Artıları: Tek bir dosya, CSS ile kolay boyutlandırma, değişken yazı tiplerinde dolgu ve kalınlık gibi ayarlar.
Eksileri: Alt küme kullanmazsanız dosya ağırdır. Yazı tipi yüklenene kadar ikonların yerinde boşluk ya da anlamsız harfler görünebilir. Ekran okuyucular bazı ikon fontlarında karakterin adını sesli okuyabilir; bu yüzden ikonun aria-hidden="true" ile gizlenmesi ve anlamın yanındaki metinle verilmesi gerekir.
Lisans notu: Yazı tipini kendi sunucunuzdan sunuyorsanız lisans dosyası yazı tipinin yanında durmalıdır. OFL lisanslı ikon fontlarında bu şart lisansın kendisinde yazılıdır.
4. Çalışma anında yüklenen bileşen
Iconify’ın iconify-icon web bileşeni ve React, Vue, Svelte bileşenleri ikonları sayfa açıldığında Iconify API’sinden çeker. Belge bu bileşenlerin yalnız ziyaretçinin baktığı sayfada kullanılan ikonların verisini yüklediğini, böylece ikonları paketlemeye gerek kalmadığını söyler; kullanmak için mdi:home gibi bir ikon adı yeterlidir.
Artıları: Kurulum kolaydır, 200 binden fazla ikona tek bir bileşenle erişirsiniz.
Eksileri: İkonlar sayfa yüklendikten sonra gelir, bu da kısa bir boşluğa yol açabilir. Daha önemlisi, ziyaretçinin tarayıcısı Iconify’ın sunucusuna istek atar; yani ziyaretçinin IP adresi gibi bağlantı bilgileri üçüncü bir tarafa gider. Gizlilik bildiriminizde bunu belirtmeyi düşünün. Iconify’ın API belgesi herkese açık sunucuların ücretsiz olduğunu ama kötüye kullanımı önlemek için istek sınırı bulunduğunu da not eder; çok trafikli bir sitede kendi API sunucunuzu kurmak ya da ikonları derleme sırasında paketlemek daha sağlamdır.
Lisans notu: İkonun kodu sizin dosyalarınızda değil, Iconify’dan geliyor. Yine de kullandığınız setlerin lisans şartları sizin için geçerlidir; CC BY setlerde görünür atıf vermeniz gerekir.
Erişilebilirlik, her yöntem için
- Yalnız süs amaçlı ikonlarda
aria-hidden="true"kullanın; anlamı yanındaki metin taşısın. - Tek başına anlam taşıyan ikonlarda (örneğin metinsiz bir arama düğmesi) düğmeye
aria-labelekleyin. - Renkli ikonlarda anlamı yalnız renge bağlamayın; kırmızı bir uyarı ikonunun yanında “Hata” kelimesi de olsun.
CSS maskesi, beşinci bir yol
Iconify’ın belgesi bir yol daha anar: ikonları CSS içinde arka plan ya da maske görseli olarak kullanmak. Bu yöntemde ikon HTML’de değil, stil dosyasında durur; bir sınıf adı ekleyerek ikonu gösterirsiniz. Tailwind CSS ve UnoCSS gibi araçlar için bunu otomatik yapan eklentiler vardır. Maske kullanıldığında tek renkli ikonlar yazı rengini alabilir.
Bu yöntemin artısı HTML’in temiz kalmasıdır. Eksisi, ikonun ekran okuyucular için bir anlam taşımamasıdır; bir düğmenin tek içeriği ikonsa, düğmeye mutlaka bir metin etiketi eklemeniz gerekir. Lisans açısından ikonun kodu stil dosyanızın içindedir; telif notunu o dosyanın başında bir yorum olarak tutmak, derleme sırasında silinmediğinden emin olmak yeterlidir.
Performans için kısa ölçüm önerisi
Hangi yöntemi seçerseniz seçin, yayına çıkmadan önce tarayıcınızın geliştirici araçlarında “Ağ” sekmesini açıp sayfayı yeniden yükleyin. İkonlar için kaç istek yapıldığını, toplam kaç kilobayt indirildiğini ve ilk ikonun ne zaman göründüğünü not edin. Aynı ölçümü farklı bir yöntemle tekrarlamak, kararınızı tahmine değil ölçüme dayandırır.
Hangi proje için hangisi
Az sayıda ikon kullanan içerik sitesi: Satır içi SVG. Ek istek yok, hız en yüksek, lisans notu kaynak deposunda.
Çok ikonlu, sayfa geçişli uygulama: SVG sprite ya da derleme sırasında paketlenen bileşenler. Kod tekrarı azalır, önbellekten yararlanılır.
Material tasarım dilinde ve değişken stiller gereken arayüz: Alt kümeli değişken ikon fontu.
Hızlı prototip: Çalışma anında yüklenen bileşen. Yayına çıkmadan önce paketlemeye geçmek gizlilik ve hız açısından iyi olur.
Bu sitede ikonları satır içi SVG olarak gösteriyoruz; çizimleri derleme sırasında Iconify’ın npm paketlerinden alıyor, idleri benzersiz yapıyor ve her ikonun yanında setin yazarını ve lisansını belirtiyoruz. Yöntemi kaynak ve hesaplama sayfasında anlattık.
Hangi setin hangi lisansla geldiğini ve görünür atıf isteyip istemediğini tüm setler sayfasında etiketlerle, atıf istemeyenleri atıfsız kullanım sayfasında görebilirsiniz.