nve-icon

Et ikon. Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra egen repo. Det anbefales sterkt å bruke Material-ikonene. Strektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes. Fill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-icon.

 

<nve-icon name="Favorite"></nve-icon>

Her er oversikt over ikoner i Material Symbols.

Eksempler

Størrelse

For å endre størrelsen, bruk --icon-size css custom property;

Man kan fortsatt bruke bare font-size css property (se siste eksempel), men man må huske å endre line-height også så at den stemmer med valgte font-size.

16px er standard.

<nve-icon name="Rocket"></nve-icon>

<nve-icon name="Rocket" style="--icon-size: 20px;"></nve-icon>

<nve-icon name="Rocket" style="--icon-size: 24px;"></nve-icon>

<nve-icon name="Rocket" style="font-size: 24px; line-height: 24px;"></nve-icon>

Skarpe eller mye kanter

Bruk library="Outlined" for myke kanter. Sharp er standard. Outlined skal kun brukes hvis symbolet blir lettere å lese.

<nve-icon name="Home"></nve-icon> skarpe <nve-icon name="Home" library="Outlined"></nve-icon> myke

Offline støtte / Bruke ikoner direkte fra egen repo

Siden nve-icon med name (altså material symboler som lastes ned når komponent blir registrert første gang) ikke støtter offline-bruk, kan man i stedet bruke ikoner som er lagret i eget repo.

Man kan bruke src. Med definert src vil nve-icon bruke <img>-taggen bak kulissene, derfor må man huske å legge til alt for tilgjengelighet.

name og library brukes ikke når src er definert. Man kan fortsatt bruke --icon-size, men bruk av font-size css property skal ikke fungere.

Selv om vi støtter bruk av ikoner direkte fra egen repo, det anbefales sterkt å bruke Material Symboler der hvor det er mulig.

<nve-icon src="/assets/home-icon.svg" alt="hjem"></nve-icon>

<nve-icon src="/assets/home-icon.svg" alt="hjem" style="--icon-size:24px"></nve-icon>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
library	'Outlined' | 'Sharp' = 'Sharp'		Skarpe eller myke hjørner. Ikonene i ikonsettet skal i utgangspunktet ha skarpe hjørner, men hjørner kan være avrundet om det gjør motivet tydeligere.
name	string = ''		Navnet på ikonet i Material Symbols-biblioteket
src	string = ''
alt	string | undefined = undefined
iconLoaded	boolean = false		Boolean som angir om ikonet har hatt tid til å laste.

Deler

Navn	Beskrivelse
icon	Selve ikon span-element.

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--icon-size	Størrelse på ikonet. 16px er standard.