SVG ikonlar HTML, CSS, React ve Vue'da nasıl kullanılır

SVG ikonlar küçük vektör dosyalarıdır: her boyutta net kalır, birkaç yüz bayt tutar ve CSS ile yeniden renklendirilebilir. Bir ikonu sayfaya eklemenin dört yaygın yolu vardır. Hangisinin uygun olduğu; ikonu biçimlendirmeniz gerekip gerekmediğine, sayfada kaç ikon olduğuna ve kullandığınız framework'e bağlıdır.

1. SVG'yi <img> etiketiyle bağlamak

En basit yöntem: ikonu diğer görseller gibi kullanın. Iconyz üzerindeki her ikonun, ikon panelinde gösterilen herkese açık bir SVG adresi vardır.

<img src="https://iconyz.com/api/public/svg/lucide/house.svg"
     width="24" height="24" alt="Ana sayfa">

Tarayıcı dosyayı önbelleğe alır ve ikon HTML'in görüntülenmesini asla engellemez. Dezavantajı, CSS'in görselin içine erişememesidir; bu yüzden color ve :hover stilleri etkili olmaz. Tek renkli ikonlarda rengi adreste belirtebilirsiniz: ?color=%23e11d48 ekleyin (URL için kodlanmış #e11d48). Ayrıntılar için SVG API rehberine bakın.

Canlıdaki uygulamalarda SVG'yi indirip kendi sitenizden sunmayı düşünün; böylece sayfalarınız üçüncü taraf bir adrese bağımlı olmaz.

2. SVG'yi satır içine yapıştırmak

Bir ikonu açın, SVG seçeneğini seçin ve kodu doğrudan HTML'inize kopyalayın:

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
       aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…"/>
  </svg>
  Ana sayfa
</button>

Satır içi SVG sayfanın bir parçasıdır, bu yüzden CSS onu tamamen kontrol eder: renk, boyut, üzerine gelme durumları, geçişler, hatta tek tek yollar. Tek renkli setler currentColor kullandığı için ikon, üst öğenin metin rengini otomatik olarak alır. En esnek seçenektir ve ek HTTP isteği gerektirmez.

Bedeli HTML boyutudur. Her satır içi ikon, kullanıldığı her sayfaya yol verilerini ekler; aynı ikonu yüzlerce kez tekrarladığınızda, örneğin uzun bir tabloda, bu fark edilir.

3. İkonu CSS'ten kullanmak

Bir CSS maskesi, tek renkli herhangi bir SVG'yi background-color ile doldurulan bir şekle dönüştürür; ikon metin rengini izler ve işaretlemesi HTML'de yer almaz:

.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
          mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
}

<span class="icon-home" aria-hidden="true"></span>

Her ikon panelindeki CSS sekmesi bu kuralı, SVG'yi data URI olarak gömerek oluşturur; böylece hiçbir dış istek gerekmez. Maskeleri yalnızca tek renkli ikonlarda kullanın: maske şekli korur, ikonun kendi renklerini atar. Çok renkli ikonlar için background-image kullanın.

4. React ve diğer JSX framework'leri

JSX, niteliklerin camelCase yazılmasını ister (stroke-width değil strokeWidth) ve props'ları aktarır. Her ikon panelindeki React sekmesi kullanıma hazır bir bileşen üretir:

export function HouseIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
         viewBox="0 0 24 24" {...props}>
      <path fill="none" stroke="currentColor" strokeWidth={2} d="…" />
    </svg>
  );
}

// Kullanım
<HouseIcon className="text-blue-600" style={{ fontSize: 20 }} aria-hidden="true" />

Boyut 1em olduğu için ikon font-size ile ölçeklenir; renk currentColor olduğu için Tailwind'in text-* gibi yardımcı sınıfları rengini değiştirir. Paketleyicinizin kullanmadığınız ikonları ayıklayabilmesi (tree-shaking) için her ikonu ayrı bir dosyada tutun ya da ikonları bir modülde toplayın. Aynı bileşen Preact'te de çalışır; Solid sekmesi de Solid sürümünü verir.

5. Vue ve Svelte

Vue'da ikonu tek dosyalı bir bileşen olarak kaydedin. class gibi verdiğiniz nitelikler kök <svg> öğesine aktarılır:

<!-- HouseIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…" />
  </svg>
</template>

Svelte de aynı şekilde çalışır: kök öğede {...$$props} bulunan SVG işaretlemesini içeren bir .svelte dosyası. İkisi de ikon panelinde sekme olarak mevcuttur.

Boyut ve renk

• Boyutu 1em ile verin. Genişlik ve yükseklik 1em olduğunda ikon yanındaki metinle aynı boyutta olur. Yeniden boyutlandırmak için font-size değerini değiştirin.
• viewBox'ı koruyun. viewBox çizimin koordinat sistemini tanımlar. Kaldırırsanız ölçekleme bozulur; boyutu genişlik ve yükseklikle değiştirin.
• Izgaraya uyun. 24 px ızgarada çizilmiş ikonlar 24 px, 48 px veya diğer katlarında en net görünür. 18 ya da 20 px'te ince çizgiler biraz bulanık görünebilir.
• Tek renkli ikonları color ile renklendirin. currentColor sayesinde tek bir CSS kuralı normal, üzerine gelme ve karanlık mod durumlarını karşılar.
• Çok renkli ikonlar paletlerini korur. Emoji, bayrak ve logoların renkleri gömülüdür. Yalnızca lisans değişikliğe izin veriyorsa renklerini değiştirin; marka logolarını asla değiştirmeyin.

Erişilebilirlik

İkonun bir anlam taşıyıp taşımadığına karar verin. Metin etiketinin yanındaki süs amaçlı ikonlar ekran okuyuculardan gizlenmeli, tek başına duran ikonlara ise metin alternatifi eklenmelidir:

<!-- Süs amaçlı: düğmenin zaten bir metni var -->
<button><svg aria-hidden="true" …>…</svg> Kaydet</button>

<!-- Yalnızca ikonlu düğme: düğmeyi etiketleyin, ikonu gizleyin -->
<button aria-label="Kapat"><svg aria-hidden="true" …>…</svg></button>

<!-- Anlam taşıyan görsel -->
<img src="…/triangle-alert.svg" alt="Uyarı">

Kontrastı da kontrol edin: WCAG 2.2'ye göre bilgi aktaran ikonların arka planla en az 3:1 kontrast oranına sahip olması gerekir.

Hangi yöntemi seçmeli?

Başlamaya hazır mısınız? Tüm setlerde arayın ya da Lucide, Tabler Icons ve Material Design Icons gibi popüler setlere göz atın. Yayına almadan önce setin lisansını kontrol edin; ikon lisansları rehberi her birinin neyi şart koştuğunu açıklar.