İçerik · Icon

Simge

e-Devlet resmî 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="trds-govde">
  <svg class="trds-simge trds-simge--kucuk" aria-hidden="true"><use href="#edk-health"/></svg>
  <svg class="trds-simge" aria-hidden="true"><use href="#edk-health"/></svg>
  <svg class="trds-simge trds-simge--buyuk" aria-hidden="true"><use href="#edk-health"/></svg>
  Sağlık hizmetleri
</p>

Metinle Canlı örnek

Belgeyi yazdır

HTML kodunu göster

<a class="trds-link trds-simgeli" href="#"><svg class="trds-simge" aria-hidden="true"><use href="#edk-tool-print"/></svg> Belgeyi yazdır</a>
<button class="trds-button trds-button--ikincil trds-simgeli" type="button"><svg class="trds-simge" aria-hidden="true"><use href="#edk-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.