Icons

Wir haben ein Set mit Basis-Icons integriert. Jedes Icon hat einen semantischen Namen erhalten, damit die funktionale Zuordnung im Kontext der Barrierefreiheit eindeutig ist.

Die SVG Sprite liegt im Parent Theme und kann mit einer SVG Sprite im Child-Theme überschrieben oder ergänzt werden. Es werde nur die IDs überschrieben, die im Child vorhanden sind. Die SVG beinhaltet alle Icons als <symbol> und <view>. Das ermöglicht den universellen Einsatz im HTML und CSS.

forward

back

collapse

expand

language

logout

external-link

download

positive

negative

check

Die einzelnen Symbole der Sprite werden über ihre ID aufgerufen. Im HTML geschieht dies mittels <use> und der ID des Icons.

<svg>
  <use href="#ICON-ID"></use>
</svg>

Wenn die Icons als CSS background-image geladen werden sollen, muss die ID um das Suffix -view modifiziert werden, damit es nicht zu Konflikten mit den IDs kommt.

.element {
  background: url('icons.svg#ICON-ID-view')
}