Ikoner

SVG

Ikonene er kun tilgjengelig i SVG-format. SVG er en tekstbasert, Ă„pen nettstandard for Ă„ beskrive vektorgrafikk som kan gjengis rent i alle stĂžrrelser, og er designet spesielt for Ă„ fungere godt med andre nettstandarder, inkludert CSS, DOM, JavaScript og SMIL.

Sette farge

Alle svg-ikoner kan fargestyres, men fremgangsmÄten varierer for en utvikler avhengig av hvilken fremgangsmÄte som brukes for Ä legge de til.

Eksempelet under viser et to-farget ikon, og viser hvordan alle ikoner er oppbygget nÄr det gjelder fargestyring. CSS-variablene --bg-color og --fg-color styrer fargene, med default-farger satt. Det er opp til deg som bruker Ä overstyre disse til dine behov. De fleste ikoner er dog enkeltfargede.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 32 32"
  id="information-circle"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="..."
    fill="var(--bg-color, #F9C66B)"
  />
  <path d="..." fill="var(--fg-color, #2A2859)" />
</svg>

Kontrollere stĂžrrelse

Ingen ikoner i Punkt har satt bredde og hÞyde, og det vil si at den skalerer til den stÞrrelsen den fÄr tilgjengelig. StÞrrelsen settes altsÄ i applikasjonen den brukes i. Er containeren 100px bred, sÄ blir svg-ikonet 100px stort ogsÄ, samtidig som det beholder stÞrrelsesforholdet.

Hvordan bruke ikonene

Alle svg-filene i Punkt er optimalisert og tilpasset vÄr standard. Men hvordan lÞnner det seg Ä bruke dem i din applikasjon? Her lister vi opp ulike alternativer, og forsÞker Ä si noe om nÄr hvilken metode passer Ä bruke.

1. Referér til SVG-fil i HTML eller CSS

Referér til filen direkte i en <img> tag.

Metoden passer nÄr du trenger en enkelt SVG inn pÄ siden. Overstyring av farge vil ikke fungere.

<!-- <img> -->
<img src="/svg/24h.svg" alt="Klokka tikker..." width="64" />

<!-- background-image -->
<style>
  .logo {
    display: block;
    text-indent: -9999px;
    width: 60px;
    height: 31px;
    background: url(/svg/oslologo.svg);
    background-size: 60px 31px;
  }
</style>
<a href="/" aria-label="Tilbake til Punkt forside" class="logo">
  Oslo kommune
</a>

2. Inline SVG

Inline svg-koden i markupen. Med denne metoden kan du styre farge.

Metoden passer nÄr du trenger full kontroll over din SVG, som f.eks styre farger. Dette er den metoden man som regel ender opp med Ä bruke, om du da ikke har for mange gjentagende ikoner pÄ en side. Ulempen er at svg-koden ikke blir cachet.

<div class="icon">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    id="24h"
    fill="none"
    data-category="services"
    viewBox="0 0 32 32"
  >
    <g fill="var(--fg-color, #2A2859)">
      <path
        d="M8.837 21.012v1.793h6.451v-1.967h-3.515l1.991-1.902c.704-.646 1.512-1.559 1.512-2.88 0-1.691-1.329-2.872-3.232-2.872-1.713 0-3.087 1.173-3.267 2.789l-.032.286 2.04.315.041-.303c.039-.292.241-1.244 1.194-1.244.489 0 .874.231 1.031.619.226.555-.048 1.283-.731 1.948l-3.483 3.418Zm11.254-7.604-3.879 5.864v1.706h4.062v1.827h2.066v-1.827h1.229v-1.879H22.34v-5.691h-2.249Zm.183 5.691h-1.677l1.677-2.644v2.644Z"
      />
      <path
        d="m24.526 9.556 1.422-1.407A13.915 13.915 0 0 1 30 18c0 7.72-6.28 14-14 14S2 25.72 2 18C2 10.503 7.927 4.382 15.34 4.033V0L23 5l-7.66 5V6.033C9.031 6.379 4 11.606 4 18c0 6.617 5.383 12 12 12s12-5.383 12-12c0-3.183-1.233-6.182-3.474-8.444Z"
      />
    </g>
  </svg>
</div>

<style>
  .icon > svg {
    --fg-color: red;
  }
</style>

3. Data URI’er

En variant av inline SVG er Ă„ putte SVG-koden andre steder, som i en <img> eller i CSS background-image.

<img src="data:image/svg+xml;[encoded svg]" />

<style>
  .bg {
    background: url('data:image/svg+xml;[encoded svg]');
  }
</style>

Her er en enkel oppskrift for Ă„ lage din SVG string til Ă„ inkluderes som en data URI:

  1. Optimaliser din SVG-fil vha svgo.
  2. Erstatt alle doble anfĂžrselstegn med enkle vha en teksteditor. Ta bort alle linjeskift.
  3. Erstatt alle ikke-ASCII og URL-utrygge karakterer, f.eks vha dette lille online verktĂžyet.
  4. Lim inn din encodede SVG inn i stedet for [encoded svg] i eksemplene over.

Metoden passer nÄr du trenger god kontroll over din SVG, som i en komponent. Ulempen er manglende caching.

4. SVG sprites

Med denne varianten putter du de ikonene du trenger i applikasjonen i en samle-svg i toppen av siden, i et <symbol>. Dette generes gjerne vha et byggescript.

Deretter kan du bruke disse SVG’ene ved Ă„ referere til deres id.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-1" viewBox="0 0 32 32">
    <!-- ikon-paths osv -->
  </symbol>
  <symbol id="icon-2" viewBox="0 0 32 32">
    <!-- ikon-paths osv -->
  </symbol>
</svg>

<!-- Bruk dem pÄ denne mÄten -->
<svg class="icon">
  <use href="#icon-1" />
</svg>
<svg class="icon">
  <use href="#icon-2" />
</svg>

Metoden passer nÄr du har ikoner som gjentas mange steder. Fint i en SPA. Her mÄ det gjÞres en avveining i hver applikasjon for Ä se hva som lÞnner seg, men det er som regel relativt tydelig.

Denne mĂ„ten tillater heller ikke caching, men det finnes flere fikse mĂ„ter der ute for Ă„ ordne det. Legg merke til at denne metoden ogsĂ„ introduserer en shadow DOM grense for SVG’en. Vi kan likevel styre fargen pĂ„ ikonene siden CSS custom properties slipper gjennom. Overstyr verdien for --fg-color og --bg-color der det trengs, og det funker som fjell.