nve-icon

Et ikon. Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra eget repo. Vi anbefaler å 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

24px er standard. For å endre størrelse, bruk --icon-size css custom property.

font-size i kombinasjon med line-height kan også brukes. Begge må være like.

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

<nve-icon name="Rocket"></nve-icon> 24px (standard størrelse)

<nve-icon name="Rocket" style="--icon-size: 28px;"></nve-icon> 28px med bruk av --icon-size

<nve-icon name="Rocket" style="font-size: 28px; line-height: 28px;"></nve-icon>28px med bruk av font-size og line-height

Skarpe eller mye kanter

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

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

Offline-støtte / Bruke ikoner direkte fra eget repo

Hvis du bruker name, lastes ikonet med aktuelt navn fra Material Symbols når komponenten blir registrert første gang. Dette funker ikke offline. Men med src, kan du bruke ikoner som er lagret i eget repo.

Hvis du bruker src, vil nve-icon bruke <img>-taggen bak kulissene, derfor må du huske å legge til alt for tilgjengelighet.

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

Selv om vi støtter bruk av ikoner direkte fra eget repo, anbefaler vi å bruke Material Symbols der det er mulig.

<nve-icon src="/assets/home-icon.svg" alt="hjemme"></nve-icon>
<nve-icon src="/assets/home-icon.svg" alt="hytta" style="--icon-size:20px"></nve-icon>

Offline-støtte internt (kun relevant for utviklere av designsystemet)

Noen av designsystem-komponentene viser også ikoner som en del av komponenten. Et eksempel er nve-message-card:

Siden designsystemet skal kunne brukes også i applikasjoner uten nett, har vi kopiert de få ikonene vi trenger fra Material Symbols inn i designsystemet. Det står mer om hvordan du gjør dette i CONTRIBUTING.md.

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 = ''		Filnavn til ikonet om du velger å bruke et lokalt ikon
alt	string | undefined = undefined		En beskrivelse av ikonet

Deler

Navn	Beskrivelse
icon	Selve ikon span-element.

Spesifikke CSS-variabler for komponent

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