Icons

5.5.3

A description of this component is work in progress.

Demo

Installation

npm install @sj-ab/component-library.ui.icons

Länkar

Best practices

Paketet @sj-ab/component-lbrary.ui.icons exponerar varje ikon som en namngiven export:

import { Airplane, Help, HelpSmall } from '@sj-ab/component-library.ui.icons';

...

return (
  <ul>
    <li>
      <Airplane />
    </li>
    <li>
      <Help />
    </li>
    <li>
      <HelpSmall />
    </li>
  </ul>
)

Tillgänglighet

Semantik

Våra ikoner är nästan alltid dekorativa och används som komplement till en synlig text. Vi presenterar därför ikonerna som en SVG med aria-hidden="true" som standard. Det gör att ikonerna kommer att ignoreras och inte läsas upp av skärmläsare, vilket minskar repetitionen i gränssnittet.

Meningsbärande ikon?

Om du av någon anledning vill att ikonen ska vara meningsbärande och att den ska läsas upp av skärmläsare kan du sätta attributen role och aria-label manuellt:

<Moon role="img" aria-label="Måne" />