Icon

Release dato: 25.10.2024

Sist oppdatert: –

Du bruker icon for å vise visuelle symboler (ikoner). Ikonene er SVG-baserte og kan brukes i alle applikasjoner for å støtte tekst eller tydeliggjøre handlinger. For å se alle ikoner som kan brukes i Punkt, se oversikten over ikoner.

Det er også mulig å bruke egne ikoner ved å inkludere en path-attributt som peker til lokasjonen til en egen SVG-fil. Du kan da legge inn stien i path og navnet på filen (uten filendelsen .svg) i name.

Live demo

Varianter

Størrelser

Du kan velge mellom tre størrelser når du bruker icon:

Variant	Beskrivelse
Small	Når det er lite plass tilgjengelig
Medium	Passer godt i knapper og andre interaktive elementer
Large	Bruk når ikonet skal få mer oppmerksomhet

Retningslinjer for bruk

Bruk icon når

du vil støtte tekstlig informasjon med et visuelt symbol
du vil tydeliggjøre handlinger eller navigasjon
du ønsker å gi ekstra kontekst til button eller link

Unngå icon når

ikonet alene skal bære all informasjon
symbolet er uklart eller kan misforstås uten tekst
du vurderer å bruke ikonet kun for dekorasjon

Ikoner skal ikke erstatte tekst

Ikoner skal alltid brukes for å støtte tekst, ikke erstatte den. Hvis ikonet ikke er åpenbart for alle brukere, må du kombinere det med en tilhørende tekst som forklarer hva ikonet representerer. Bruk ikoner som er tydelige og gjenkjennelige for målgruppen.

Gjør slik

Unngå

Universell utforming

Alle ikoner må ha tilgjengelig navn eller tekst, enten via aria-label, aria-hidden eller ved at de kombineres med tekst i brukergrensesnittet.

Hvis ikonet kun er dekorativt, bruk aria-hidden="true" for å skjule det for skjermlesere.

Ikonene skal ha en tydelig kontrast mot bakgrunnen for å være godt synlige.

For bruk i lenker eller knapper skal ikonet ha en tydelig sammenheng med handlingen som utføres og teksten som hører med.

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-icon");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Stilsetting og farger

For ferdige klasser for størrelse på ikonene, kan man legge til klassene pkt-icon--small, pkt-icon--medium og pkt-icon--large på pkt-icon-elementet.

Det er også mulig å sette sine egne farger på ikonene ved å overstyre CSS-variabel --fg-color på SVGen i pkt-icon-elementet.

<style>
  .green-layout pkt-icon {
    --fg-color: var(--pkt-color-brand-green-1000);
  }
</style>
<div class="green-layout">
  <pkt-icon name="user"></pkt-icon>
</div>

Avansert bruk

Som nevnt over kan man overstyre path-attributtet for å bruke egne ikoner.

<pkt-icon
  name="bees"
  path="/assets/"
></pkt-icon>

Dersom man har behov for å overstyre absolutt alle path-attributter kan man sette dette globalt ved å overstyre window.pktIconPath.

<script>
  window.pktIconPath = "/assets/egne-ikoner/"
</script>
<pkt-icon
  name="eget-ikon"
></pkt-icon>

Dersom man har enda mer avanserte behov, eller trenger å overstyre fetch-funksjonen i enhetstester eller liknende, kan man også overstyre med window.pktFetch. Her er det viktig at man følger JavaScripts fetch sitt API, og returnerer en Promise.

window.pktFetch = () =>  
  Promise.resolve({  
    ok: true,  
    text: () => Promise.resolve('<div>FakeIcon</div>'),  
  });

Props og tokens

Prop	Type	Beskrivelse
`name`	`icon`	Ikonet som skal vises
`path`	`string`	Overstyr stien til ikonet som skal vises
`className`	`pkt-icon--small` `pkt-icon--medium` `pkt-icon--large`	(className for React, class for elementer)