İçerik · Icon

Simge

Kiriş simge setinden bir simgeyi üç boyda gösterir. Yeni simge çizilmez.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Üç boy Canlı örnek

Sağlık hizmetleri

HTML kodunu göster

<p class="kiris-govde">
  <svg class="kiris-simge kiris-simge--kucuk" aria-hidden="true"><use href="#kiris-health"/></svg>
  <svg class="kiris-simge" aria-hidden="true"><use href="#kiris-health"/></svg>
  <svg class="kiris-simge kiris-simge--buyuk" aria-hidden="true"><use href="#kiris-health"/></svg>
  Sağlık hizmetleri
</p>

Metinle Canlı örnek

Belgeyi yazdır

HTML kodunu göster

<a class="kiris-link kiris-simgeli" href="#"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-print"/></svg> Belgeyi yazdır</a>
<button class="kiris-button kiris-button--ikincil kiris-simgeli" type="button"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-refresh"/></svg> Yenile</button>

Ne zaman kullanılır

Bir eylemi veya bölümü tanımak için metnin yanında kullanın.
Simgeyi tek başına anlam taşıyacak biçimde kullanmayın. Yanında metin bulunur.
Set dışından simge kullanmayın. Vatandaş aynı simgeyi her sitede tanır.

Erişilebilirlik

Süs simgesi aria-hidden="true" taşır.
Anlam taşıyan simge role="img" ve aria-label taşır.
Simge currentColor ile metnin rengini alır. Karşıtlık metinle aynıdır.

Karşılanan WCAG 2.2 ölçütleri 1.1.1 1.4.11

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, IE, DE, KR.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-icon ile başlayan sınıflar