Oppdaterte ikonkomponenter med Material Symbols

[piofinn]

Endrer alle ikonene våre til å bruke Material Symbols fra Google.

Alle ikonene våre er tilgjengelige som før, som komponenter med samme navn og samme props. Annet enn å avhenge av ny versjon av webfonts-pakka, som nå også inneholder ikonfonten, skal det være mulig å ta i bruk de nye ikonene uten noen endringer.

Ny funksjonalitet

• Fylte ikoner. Material Symbols støtter både fylte og ikke fylte ikoner. Du kan bytte mellom disse med filled-propen. Fyllet animeres inn og ut! ✨
• Automatisk bold. Dersom du bruker ikoner i et element med en tekststil fra Jøkul (f.eks. Heading 3) vil ikonet automatisk få riktig fontvekt (bold eller normal). Dette vil også funke automatisk inne i strong-tags, så nå slipper du å finne riktig variant! 😮‍💨
• Mulighet for flere ikoner. Dersom det trengs et ikon som ikke er blant våre vanlige ikoner (og det er fornuftig å bruke et ikon!), kan man bruke den generelle Icon-komponenten, og velge blant alle ikonene i Material Symbols. 🫨

Ting å tenke på

• Fontfila til ikonene er ganske svær. Det er nok en god idé å be nettleseren om å preloade den. Du finner instruksjoner for dette i dokumentasjonen! 📘
• Ikke gå helt bananas med ikoner bare fordi vi nå har fått tilgang til flere! Reglene for god bruk av ikoner gjelder fortsatt. Sjekk gjerne med andre team hvis du skal bruke et nytt ikon, så sikrer vi at man bruker samme ikon for samme type handling. 🤜🤛

🎯 Sjekkliste

• [x] Nye features er dokumentert (sjekk Contributing om du er usikker på hva som trengs av dokumentasjon)
• [x] Testet responsivitet og UU (tastaturnavigasjon, skjermleser)
• [ ] pnpm build og pnpm ci:test gir ingen feil