İkonlar — WebBlocks UI

Kullanım

İkon sprite'ı ayrı bir dosyadır: dist/webblocks-icons.svg. Küçük bir satır içi script ile sayfa başına bir kez yükleyin, ardından herhangi bir ikona ID ile başvurun.

1. Sprite'ı yükle

<!-- <body> sonuna, webblocks-ui.js'den sonra yerleştirin -->
<script>
  fetch('dist/webblocks-icons.svg')
    .then(function(r) { return r.text(); })
    .then(function(svg) {
      var parser = new DOMParser();
      var svgEl = parser.parseFromString(svg, 'image/svg+xml').documentElement;
      svgEl.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden';
      document.body.insertBefore(svgEl, document.body.firstChild);
      if (window.WBTheme) window.WBTheme.sync();
    });
</script>

2a. SVG <use> kalıbı

Anlamsal, erişilebilir, kolay tema için currentColor'ı devralır.

<!-- Varsayılan boyut (20px) -->
<svg class="wb-icon"><use href="#wb-icon-settings"></use></svg>

<!-- Boyut varyantları -->
<svg class="wb-icon wb-icon-sm"><use href="#wb-icon-settings"></use></svg>  <!-- 16px -->
<svg class="wb-icon wb-icon-lg"><use href="#wb-icon-settings"></use></svg>  <!-- 24px -->
<svg class="wb-icon wb-icon-xl"><use href="#wb-icon-settings"></use></svg>  <!-- 32px -->

<!-- Renk yardımcılarıyla -->
<svg class="wb-icon wb-icon-accent"><use href="#wb-icon-star"></use></svg>
<svg class="wb-icon wb-icon-muted"><use href="#wb-icon-info"></use></svg>
<svg class="wb-icon wb-icon-success"><use href="#wb-icon-check"></use></svg>
<svg class="wb-icon wb-icon-danger"><use href="#wb-icon-x"></use></svg>

<!-- Daire arka planlı sarmalayıcı -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-bell"></use></svg>
</span>

2b. <i> etiketi kalıbı (isteğe bağlı)

Bootstrap tarzı <i> desteği için dist/webblocks-icons.css yükleyin (CSS mask-image kullanır).

<link rel="stylesheet" href="dist/webblocks-icons.css">

<!-- Ardından <i> etiketi kullanın (sprite fetch gerekmez) -->
<i class="wb-icon wb-icon-settings"></i>
<i class="wb-icon wb-icon-sm wb-icon-bell"></i>
<i class="wb-icon wb-icon-lg wb-icon-check wb-icon-success"></i>

İki yöntem, tek sınıf sistemi. wb-icon boyut ve renk yardımcı sınıfları hem SVG <use> hem de <i> etiketleri için aynı şekilde çalışır. Anlamsal kullanım ve daha iyi erişilebilirlik için sprite tabanlı yaklaşım önerilir.

CDN URL'leri

<!-- Sprite (<svg><use> kalıbı için gerekli) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.svg

<!-- İkon CSS (<i> etiketi kalıbı için gerekli) -->
https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-icons.css

Boyut & Renk Sınıfları

Bu sınıfları doğrudan <svg class="wb-icon"> veya <i class="wb-icon"> üzerine uygulayın.

Boyut değiştiricileri

Sınıf	Boyut	Kullanım durumu
wb-icon-sm	16px	Satır içi metin, rozetler, kompakt arayüz
(varsayılan)	20px	Düğmeler, gezinme öğeleri, çoğu arayüz bağlamı
wb-icon-lg	24px	Başlıklar, kart ikonları, öne çıkan eylemler
wb-icon-xl	32px	Boş durumlar, özellik vurguları

Renk yardımcıları

Sınıf	Kullanılan token	Açıklama
wb-icon-accent	--wb-accent-text	Vurgu / marka rengi
wb-icon-muted	--wb-muted	Soluk, ikincil ikonlar
wb-icon-success	--wb-success	Olumlu / onaylandı
wb-icon-warning	--wb-warning	Dikkat / uyarı
wb-icon-danger	--wb-danger	Yıkıcı / hata
wb-icon-info	--wb-info	Bilgilendirici
(yok)	currentColor	Üst öğenin metin rengini devralır

İkon sarmalayıcı

<!-- Vurgu-soft arka planlı yuvarlak kapsayıcı -->
<span class="wb-icon-wrap">
  <svg class="wb-icon wb-icon-accent"><use href="#wb-icon-settings"></use></svg>
</span>

<!-- Sarmalayıcı boyut varyantları -->
<span class="wb-icon-wrap wb-icon-wrap-sm">…</span>
<span class="wb-icon-wrap wb-icon-wrap-lg">…</span>

İkon Galerisi

Snippet'i kopyalamak için herhangi bir ikona tıklayın. <svg><use> ve <i> formatları arasında geçiş yapmak için düğmeyi kullanın.

133 ikon