Merged in feat/SW-1711-switch-icons (pull request #1558)

Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import type { AccessibilityProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { IconName } from "@/types/components/icon"
 
 export default function Accessibility({
   elevatorPitchText,

apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import type { CheckInCheckOutProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { IconName } from "@/types/components/icon"
 
 export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
   const intl = useIntl()

apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import type { MeetingsAndConferencesProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { IconName } from "@/types/components/icon"
 
 export default function MeetingsAndConferences({
   meetingDescription,

apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx

@@ -1,13 +1,14 @@
 import { useIntl } from "react-intl"
 
-import FilledHeartIcon from "@/components/Icons/FilledHeart"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./sidePeekAccordion.module.css"
 
 import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { IconName } from "@/types/components/icon"
 
 export default function Parking({ parking }: ParkingProps) {
   const intl = useIntl()
@@ -28,7 +29,7 @@ export default function Parking({ parking }: ParkingProps) {
             <ul className={styles.list}>
               {p.address !== undefined && (
                 <li>
-                  <FilledHeartIcon color="baseIconLowContrast" />
+                  <MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
                   {intl.formatMessage(
                     { id: "Address: {address}" },
                     {
@@ -39,7 +40,7 @@ export default function Parking({ parking }: ParkingProps) {
               )}
               {p.numberOfParkingSpots !== undefined && (
                 <li>
-                  <FilledHeartIcon color="baseIconLowContrast" />
+                  <MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
                   {intl.formatMessage(
                     { id: "Number of parking spots: {number}" },
                     { number: p.numberOfParkingSpots }
@@ -48,7 +49,7 @@ export default function Parking({ parking }: ParkingProps) {
               )}
               {p.numberOfChargingSpaces !== undefined && (
                 <li>
-                  <FilledHeartIcon color="baseIconLowContrast" />
+                  <MaterialIcon icon="favorite" isFilled color="Icon/Accent" />
                   {intl.formatMessage(
                     {
                       id: "Number of charging points for electric cars: {number}",

apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import type { RestaurantProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { IconName } from "@/types/components/icon"
 
 export default function Restaurant({
   restaurantsContentDescriptionMedium,

apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Contact from "@/components/HotelReservation/Contact"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -73,12 +73,12 @@ export default function HotelSidePeek({
         </Accordion>
         <div className={styles.amenity}>
           {amenitiesList.map((amenity) => {
-            const Icon = mapFacilityToIcon(amenity.id)
+            const Icon = (
+              <FacilityToIcon id={amenity.id} size={24} color="Icon/Intense" />
+            )
             return (
               <Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
-                {Icon && (
-                  <Icon width={24} height={24} color="uiTextHighContrast" />
-                )}
+                {Icon && Icon}
                 {amenity.name}
               </Subtitle>
             )