Icon

Om komponenten

Ikonkomponenten brukes til å vise ikoner. Ikonene er SVG-baserte og kan brukes i alle applikasjoner. 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.

Komponentbygger for Punkts ikoner

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>'),  
  });

Universell utforming

• Husk at et ikon alene ikke kan formidle informasjon. Det er viktig at ikonet har en tilhørende tekst som forklarer hva ikonet representerer.
• 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.