Merged in feat/sw-3145-move-iconbyiconname-to-design-system (pull request #2589)

Move icon components to design-system

* Move icon components to design-system


Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts

@@ -1,9 +1,9 @@
 // import { REWARD_IDS } from "@scandic-hotels/trpc/types/rewards"
 
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+import { IllustrationByIconName } from "@scandic-hotels/design-system/Icons/IllustrationByIconName"
 import { REWARD_IDS, type RewardId } from "@scandic-hotels/trpc/types/rewards"
 
-import { IconName } from "@/components/Icons/iconName"
-import { IllustrationByIconName } from "@/components/Icons/IllustrationByIconName"
 import { isValidRewardId } from "@/utils/rewards"
 
 import type { IconProps } from "@scandic-hotels/design-system/Icons"

apps/scandic-web/components/Blocks/Essentials/index.tsx

@@ -1,9 +1,8 @@
 import { cx } from "class-variance-authority"
 
+import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import IconByCSSelect from "@/components/Icons/IconByCSSelect"
-
 import styles from "./essentials.module.css"
 
 import type { EssentialsBlock } from "@scandic-hotels/trpc/types/campaignPage"

apps/scandic-web/components/Blocks/UspGrid/index.tsx

@@ -1,4 +1,5 @@
-import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+
 import JsonToHtml from "@/components/JsonToHtml"
 
 import { renderOptions } from "./renderOptions"

apps/scandic-web/components/Blocks/UspGrid/utils.ts

@@ -1,4 +1,4 @@
-import { IconName } from "@/components/Icons/iconName"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 
 import type { UspIcon } from "@/types/components/blocks/uspGrid"
 

apps/scandic-web/components/ContentType/HotelPage/data.tsx

@@ -1,8 +1,7 @@
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { FacilityEnum } from "@scandic-hotels/trpc/enums/facilities"
 
-import { IconByIconName } from "@/components/Icons/IconByIconName"
-import { IconName } from "@/components/Icons/iconName"
-
 import type {
   IconProps,
   NucleoIconProps,

apps/scandic-web/components/Footer/Details/SocialLink/index.tsx

@@ -1,11 +1,13 @@
 "use client"
 
-import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+
 import { trackSocialMediaClick } from "@/utils/tracking"
 
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import type { SocialLinkProps } from "@/types/components/footer/socialLink"
-import type { IconName } from "@/components/Icons/iconName"
 
 function SocialIcon({ iconName }: SocialIconsProps) {
   const SocialIcon = (

apps/scandic-web/components/Header/HeaderLink/index.tsx

@@ -2,10 +2,9 @@
 
 import Link from "next/link"
 
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { IconByIconName } from "@/components/Icons/IconByIconName"
-
 import styles from "./headerLink.module.css"
 
 import type { HeaderLinkProps } from "@/types/components/header/headerLink"

apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx

@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 
 import { customerService } from "@/constants/webHrefs"
 import useDropdownStore from "@/stores/main-menu"
 
-import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/Header/TopLink/index.tsx

@@ -1,4 +1,4 @@
-import { IconName } from "@/components/Icons/iconName"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 
 import HeaderLink from "../HeaderLink"
 

apps/scandic-web/components/Header/TopMenu/index.tsx

@@ -1,9 +1,9 @@
 import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { getHeader } from "@/lib/trpc/memoizedRequests"
 
-import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

apps/scandic-web/components/Icons/IconByCSSelect.tsx

@@ -1,92 +0,0 @@
-import BouquetIcon from "@scandic-hotels/design-system/Icons/BouquetIcon"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
-import {
-  MaterialIcon,
-  type MaterialIconProps,
-} from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon"
-
-import type { IconProps } from "@scandic-hotels/design-system/Icons"
-
-interface IconByCSSelectProps extends IconProps {
-  identifier: string
-}
-
-export default function IconByCSSelect({
-  identifier,
-  color = "CurrentColor",
-  size = 24,
-  ...props
-}: IconByCSSelectProps) {
-  switch (identifier) {
-    // These are custom icons
-    case "discount-2-2":
-      return <DiscountIcon size={size} color={color} {...props} />
-    case "bouquet":
-      return <BouquetIcon size={size} color={color} {...props} />
-    case "palm_tree":
-      return <PalmTreeIcon size={size} color={color} {...props} />
-
-    // These are all Material Icons
-    case "electric_car":
-    case "golf_course":
-    case "museum":
-    case "spa":
-    case "airplane_ticket":
-    case "apartment":
-    case "attractions":
-    case "award_star":
-    case "beach_access":
-    case "box":
-    case "deck":
-    case "directions_run":
-    case "directions_subway":
-    case "downhill_skiing":
-    case "emoji_transportation":
-    case "exercise":
-    case "family_restroom":
-    case "festival":
-    case "forest":
-    case "garage":
-    case "hiking":
-    case "houseboat":
-    case "kayaking":
-    case "landscape":
-    case "location_city":
-    case "location_on":
-    case "loyalty":
-    case "music_note":
-    case "night_shelter":
-    case "nightlife":
-    case "pedal_bike":
-    case "pets":
-    case "pool":
-    case "recommend":
-    case "redeem":
-    case "restaurant":
-    case "sauna":
-    case "sell":
-    case "shopping_bag":
-    case "sports_handball":
-    case "sports_tennis":
-    case "theater_comedy":
-    case "things_to_do":
-    case "tram":
-    case "transit_ticket":
-    case "travel":
-    case "travel_luggage_and_bags":
-    case "favorite":
-      return (
-        <MaterialIcon
-          icon={identifier as MaterialIconProps["icon"]}
-          size={size}
-          color={color}
-          {...props}
-        />
-      )
-    default:
-      return (
-        <MaterialIcon size={size} icon="favorite" color={color} {...props} />
-      )
-  }
-}

apps/scandic-web/components/Icons/IconByIconName.tsx

@@ -1,375 +0,0 @@
-import BathroomCabinetIcon from "@scandic-hotels/design-system/Icons/BathroomCabinetIcon"
-import BouquetIcon from "@scandic-hotels/design-system/Icons/BouquetIcon"
-import BowlingPinsIcon from "@scandic-hotels/design-system/Icons/BowlingPinsIcon"
-import ChipsIcon from "@scandic-hotels/design-system/Icons/ChipsIcon"
-import ConferenceRoomIcon from "@scandic-hotels/design-system/Icons/ConferenceRoomIcon"
-import DoorIcon from "@scandic-hotels/design-system/Icons/DoorIcon"
-import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
-import FootStoolIcon from "@scandic-hotels/design-system/Icons/FootStoolIcon"
-import HairdresserIcon from "@scandic-hotels/design-system/Icons/HairdresserIcon"
-import HairdryerIcon from "@scandic-hotels/design-system/Icons/HairdryerIcon"
-import IceMachineIcon from "@scandic-hotels/design-system/Icons/IceMachineIcon"
-import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
-import MassageIcon from "@scandic-hotels/design-system/Icons/MassageIcon"
-import {
-  MaterialIcon,
-  type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon"
-import PopcornIcon from "@scandic-hotels/design-system/Icons/PopcornIcon"
-import RecordPlayerIcon from "@scandic-hotels/design-system/Icons/RecordPlayerIcon"
-import RoadIcon from "@scandic-hotels/design-system/Icons/RoadIcon"
-import SafetyBoxIcon from "@scandic-hotels/design-system/Icons/SafetyBoxIcon"
-import ToiletIcon from "@scandic-hotels/design-system/Icons/ToiletIcon"
-import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
-import UserPoliceIcon from "@scandic-hotels/design-system/Icons/UserPoliceIcon"
-
-import { IconName } from "./iconName"
-
-import type {
-  IconProps,
-  NucleoIconProps,
-} from "@scandic-hotels/design-system/Icons"
-import type { JSX } from "react"
-
-interface IconByIconNameProps {
-  iconName: IconName | null
-}
-export function IconByIconName({
-  iconName,
-  ...props
-}: IconByIconNameProps &
-  (
-    | IconProps
-    | NucleoIconProps
-    | MaterialIconSetIconProps
-  )): JSX.Element | null {
-  switch (iconName) {
-    case IconName.Accessibility:
-      return <MaterialIcon icon="accessibility" {...props} />
-    case IconName.Air:
-      return <MaterialIcon icon="air" {...props} />
-    case IconName.ArrowFrom:
-      return <MaterialIcon icon="upload" {...props} />
-    case IconName.ArrowTo:
-      return <MaterialIcon icon="download" {...props} />
-    case IconName.AwardStar:
-      return <MaterialIcon icon="award_star" {...props} />
-    case IconName.Swipe:
-      return <MaterialIcon icon="swipe" {...props} />
-    case IconName.ConferenceRoom:
-      return <ConferenceRoomIcon {...props} />
-    case IconName.BathroomCabinet:
-      return <BathroomCabinetIcon {...props} />
-    case IconName.Chips:
-      return <ChipsIcon {...props} />
-    case IconName.Bouquet:
-      return <BouquetIcon {...props} />
-    case IconName.CashFree:
-      return <MaterialIcon icon="credit_card_heart" {...props} />
-    case IconName.SafetyBox:
-      return <SafetyBoxIcon {...props} />
-    case IconName.Toilet:
-      return <ToiletIcon {...props} />
-    case IconName.Popcorn:
-      return <PopcornIcon {...props} />
-    case IconName.RecordPlayer:
-      return <RecordPlayerIcon {...props} />
-    case IconName.PalmTree:
-      return <PalmTreeIcon {...props} />
-    case IconName.Bowling:
-      return <BowlingPinsIcon {...props} />
-    case IconName.Skiing:
-      return <MaterialIcon icon="downhill_skiing" {...props} />
-    case IconName.AirConAirCooling:
-      return <MaterialIcon icon="mode_fan" {...props} />
-    case IconName.Beach:
-      return <MaterialIcon icon="beach_access" {...props} />
-    case IconName.Hiking:
-      return <MaterialIcon icon="hiking" {...props} />
-    case IconName.LaptopSafe:
-      return <MaterialIcon icon="sync_saved_locally" {...props} />
-    case IconName.BeautySalon:
-      return <MaterialIcon icon="health_and_beauty" {...props} />
-    case IconName.Gaming:
-      return <MaterialIcon icon="sports_esports" {...props} />
-    case IconName.AirConditioningInRoom:
-      return <MaterialIcon icon="air_purifier_gen" {...props} />
-    case IconName.Airplane:
-      return <MaterialIcon icon="travel" {...props} />
-    case IconName.ArmChair:
-      return <MaterialIcon icon="chair" {...props} />
-    case IconName.ArrowRight:
-      return <MaterialIcon icon="arrow_forward" {...props} />
-    case IconName.ArrowRightSmall:
-      return <MaterialIcon icon="arrow_forward" {...props} />
-    case IconName.ArrowLeft:
-      return <MaterialIcon icon="arrow_back" {...props} />
-    case IconName.ArrowLeftSmall:
-      return <MaterialIcon icon="arrow_back" {...props} />
-    case IconName.Bar:
-      return <MaterialIcon icon="local_bar" {...props} />
-    case IconName.Bed:
-      return <MaterialIcon icon="bed" {...props} />
-    case IconName.LuggageLockers:
-      return <DoorIcon {...props} />
-    case IconName.NonSmoking:
-      return <MaterialIcon icon="smoke_free" {...props} />
-    case IconName.TVRemote:
-      return <MaterialIcon icon="tv_remote" {...props} />
-    case IconName.Minibar:
-      return <MaterialIcon icon="liquor" {...props} />
-    case IconName.Business:
-    case IconName.BusinessCentre:
-      return <MaterialIcon icon="business_center" {...props} />
-    case IconName.IceMachine:
-      return <IceMachineIcon {...props} />
-    case IconName.Massage:
-      return <MassageIcon {...props} />
-    case IconName.Luggage:
-      return <MaterialIcon icon="luggage" {...props} />
-    case IconName.Ironing:
-      return <MaterialIcon icon="iron" {...props} />
-    case IconName.Kitchen:
-      return <MaterialIcon icon="countertops" {...props} />
-    case IconName.Guard:
-      return <UserPoliceIcon {...props} />
-    case IconName.Fax:
-      return <MaterialIcon icon="fax" {...props} />
-    case IconName.Calendar:
-      return <MaterialIcon icon="calendar_today" {...props} />
-    case IconName.Camera:
-      return <MaterialIcon icon="photo_camera" {...props} />
-    case IconName.Cellphone:
-    case IconName.Phone:
-      return <MaterialIcon icon="phone" {...props} />
-    case IconName.HairdryerInRoomAllScandic:
-      return <HairdryerIcon {...props} />
-    case IconName.ComplimentaryColdRefreshments:
-      return <MaterialIcon icon="water_full" {...props} />
-    case IconName.Check:
-      return <MaterialIcon icon="check_box" {...props} />
-    case IconName.CrossCircle:
-      return <MaterialIcon icon="cancel" {...props} />
-    case IconName.Wheelchair:
-      return <MaterialIcon icon="accessible" {...props} />
-    case IconName.Hairdresser:
-      return <HairdresserIcon {...props} />
-    case IconName.FoodDrinks247:
-      return <MaterialIcon icon="fastfood" {...props} />
-    case IconName.ExtraFamilyFriendly:
-      return <MaterialIcon icon="family_restroom" {...props} />
-    case IconName.Desk:
-      return <MaterialIcon icon="desk" {...props} />
-    case IconName.ConventionCentre:
-      return <MaterialIcon icon="groups" {...props} />
-    case IconName.City:
-      return <MaterialIcon icon="location_city" {...props} />
-    case IconName.CrossCircleOutline:
-      return <MaterialIcon icon="cancel" {...props} />
-    case IconName.CheckCircle:
-      return <MaterialIcon icon="check_circle" {...props} />
-    case IconName.ChevronDown:
-      return <MaterialIcon icon="keyboard_arrow_down" {...props} />
-    case IconName.ChevronDownSmall:
-      return <MaterialIcon icon="keyboard_arrow_down" {...props} />
-    case IconName.ChevronLeft:
-      return <MaterialIcon icon="chevron_left" {...props} />
-    case IconName.ChevronLeftSmall:
-      return <MaterialIcon icon="chevron_left" {...props} />
-    case IconName.ChevronRight:
-      return <MaterialIcon icon="chevron_right" {...props} />
-    case IconName.ChevronRightSmall:
-      return <MaterialIcon icon="chevron_right" {...props} />
-    case IconName.ChevronUp:
-      return <MaterialIcon icon="keyboard_arrow_up" {...props} />
-    case IconName.ChevronUpSmall:
-      return <MaterialIcon icon="keyboard_arrow_up" {...props} />
-    case IconName.Close:
-      return <MaterialIcon icon="close" {...props} />
-    case IconName.CloseLarge:
-      return <MaterialIcon icon="close" {...props} />
-    case IconName.ConvenienceStore24h:
-      return <MaterialIcon icon="local_convenience_store" {...props} />
-    case IconName.CoffeeAlt:
-    case IconName.CoffeeInReceptionAtCharge:
-      return <MaterialIcon icon="coffee" {...props} />
-    case IconName.Concierge:
-      return <MaterialIcon icon="concierge" {...props} />
-    case IconName.Cultural:
-      return <MaterialIcon icon="theater_comedy" {...props} />
-    case IconName.Diamond:
-      return <MaterialIcon icon="diamond" {...props} />
-    case IconName.Directions:
-      return <MaterialIcon icon="directions" {...props} />
-    case IconName.DoorOpen:
-      return <MaterialIcon icon="meeting_room" {...props} />
-    case IconName.Dresser:
-      return <MaterialIcon icon="dresser" {...props} />
-    case IconName.ElectricBike:
-      return <MaterialIcon icon="electric_bike" {...props} />
-    case IconName.ElectricCar:
-      return <MaterialIcon icon="electric_car" {...props} />
-    case IconName.Email:
-      return <MaterialIcon icon="mail" {...props} />
-    case IconName.EyeHide:
-      return <MaterialIcon icon="visibility_off" {...props} />
-    case IconName.EyeShow:
-      return <MaterialIcon icon="visibility" {...props} />
-    case IconName.Fan:
-      return <MaterialIcon icon="mode_fan" {...props} />
-    case IconName.Facebook:
-      return <FacebookIcon {...props} />
-    case IconName.Fitness:
-      return <MaterialIcon icon="exercise" {...props} />
-    case IconName.Footstool:
-      return <FootStoolIcon {...props} />
-    case IconName.Gallery:
-      return <MaterialIcon icon="filter" {...props} />
-    case IconName.Garage:
-      return <MaterialIcon icon="garage" {...props} />
-    case IconName.Gift:
-      return <MaterialIcon icon="featured_seasonal_and_gifts" {...props} />
-    case IconName.Theatre:
-      return <MaterialIcon icon="theater_comedy" {...props} />
-    case IconName.Sports:
-      return <MaterialIcon icon="sports_tennis" {...props} />
-    case IconName.Bike:
-      return <MaterialIcon icon="pedal_bike" {...props} />
-    case IconName.Globe:
-      return <MaterialIcon icon="globe" {...props} />
-    case IconName.Golf:
-      return <MaterialIcon icon="sports_golf" {...props} />
-    case IconName.Dining:
-      return <MaterialIcon icon="dining" {...props} />
-    case IconName.Hanger:
-      return <MaterialIcon icon="checkroom" {...props} />
-    case IconName.HangerAlt:
-      return <MaterialIcon icon="styler" {...props} />
-    case IconName.Heat:
-      return <MaterialIcon icon="heat" {...props} />
-    case IconName.Heart:
-      return <MaterialIcon icon="favorite" {...props} />
-    case IconName.House:
-      return <MaterialIcon icon="home" {...props} />
-    case IconName.Houseboat:
-      return <MaterialIcon icon="houseboat" {...props} />
-    case IconName.Image:
-      return <MaterialIcon icon="imagesmode" {...props} />
-    case IconName.InfoCircle:
-      return <MaterialIcon icon="info" {...props} />
-    case IconName.Instagram:
-      return <InstagramIcon {...props} />
-    case IconName.Kayaking:
-      return <MaterialIcon icon="kayaking" {...props} />
-    case IconName.Kettle:
-      return <MaterialIcon icon="kettle" {...props} />
-    case IconName.Landscape:
-      return <MaterialIcon icon="landscape" {...props} />
-    case IconName.Lamp:
-      return <MaterialIcon icon="floor_lamp" {...props} />
-    case IconName.LaundryMachine:
-      return <MaterialIcon icon="local_laundry_service" {...props} />
-    case IconName.Link:
-      return <MaterialIcon icon="link" {...props} />
-    case IconName.LocalBar:
-      return <MaterialIcon icon="local_bar" {...props} />
-    case IconName.Location:
-      return <MaterialIcon icon="location_on" {...props} />
-    case IconName.Lock:
-      return <MaterialIcon icon="lock" {...props} />
-    case IconName.Map:
-      return <MaterialIcon icon="map" {...props} />
-    case IconName.Minus:
-      return <MaterialIcon icon="remove" {...props} />
-    case IconName.Museum:
-      return <MaterialIcon icon="museum" {...props} />
-    case IconName.Nature:
-      return <MaterialIcon icon="nature" {...props} />
-    case IconName.Nightlife:
-      return <MaterialIcon icon="nightlife" {...props} />
-    case IconName.NightShelter:
-      return <MaterialIcon icon="night_shelter" {...props} />
-    case IconName.NoSmoking:
-      return <MaterialIcon icon="smoke_free" {...props} />
-    case IconName.OpenInNew:
-      return <MaterialIcon icon="open_in_new" {...props} />
-    case IconName.OpenInNewSmall:
-      return <MaterialIcon icon="open_in_new" {...props} />
-    case IconName.OutdoorFurniture:
-    case IconName.Deck:
-      return <MaterialIcon icon="deck" {...props} />
-    case IconName.Parking:
-      return <MaterialIcon icon="local_parking" {...props} />
-    case IconName.Person:
-      return <MaterialIcon icon="person" {...props} />
-    case IconName.ParkingOutdoor:
-      return <MaterialIcon icon="emoji_transportation" {...props} />
-    case IconName.Pets:
-      return <MaterialIcon icon="pets" {...props} />
-    case IconName.Plus:
-      return <MaterialIcon icon="add" {...props} />
-    case IconName.PlusCircle:
-      return <MaterialIcon icon="add_circle" {...props} />
-    case IconName.PriceTag:
-      return <MaterialIcon icon="sell" {...props} />
-    case IconName.Restaurant:
-      return <MaterialIcon icon="restaurant" {...props} />
-    case IconName.RoomService:
-      return <MaterialIcon icon="room_service" {...props} />
-    case IconName.Smoking:
-      return <MaterialIcon icon="smoking_rooms" {...props} />
-    case IconName.Spa:
-      return <MaterialIcon icon="spa" {...props} />
-    case IconName.Sauna:
-      return <MaterialIcon icon="sauna" {...props} />
-    case IconName.Search:
-      return <MaterialIcon icon="search" {...props} />
-    case IconName.Service:
-      return <MaterialIcon icon="call_quality" {...props} />
-    case IconName.Elevator:
-      return <MaterialIcon icon="elevator" {...props} />
-    case IconName.Shopping:
-      return <MaterialIcon icon="shopping_bag" {...props} />
-    case IconName.Skateboarding:
-      return <MaterialIcon icon="skateboarding" {...props} />
-    case IconName.Snowflake:
-      return <MaterialIcon icon="asterisk" {...props} />
-    case IconName.Star:
-      return <MaterialIcon icon="star" {...props} />
-    case IconName.StarFilled:
-      return <MaterialIcon icon="star" isFilled {...props} />
-    case IconName.Street:
-      return <RoadIcon {...props} />
-    case IconName.Swim:
-      return <MaterialIcon icon="pool" {...props} />
-    case IconName.Ticket:
-      return <MaterialIcon icon="transit_ticket" {...props} />
-    case IconName.Thermostat:
-      return <MaterialIcon icon="device_thermostat" {...props} />
-    case IconName.Tshirt:
-      return <MaterialIcon icon="apparel" {...props} />
-    case IconName.Train:
-      return <MaterialIcon icon="train" {...props} />
-    case IconName.Tripadvisor:
-      return <TripadvisorIcon {...props} />
-    case IconName.TshirtWash:
-      return <MaterialIcon icon="laundry" {...props} />
-    case IconName.TvCasting:
-      return <MaterialIcon icon="connected_tv" {...props} />
-    case IconName.WarningTriangle:
-      return <MaterialIcon icon="warning" {...props} />
-    case IconName.Wifi:
-      return <MaterialIcon icon="wifi" {...props} />
-    case IconName.Breakfast:
-      return <MaterialIcon icon="bakery_dining" {...props} />
-    case IconName.Jacuzzi:
-      return <MaterialIcon icon="hot_tub" {...props} />
-    case IconName.DirectDial:
-      return <MaterialIcon icon="call" {...props} />
-    case IconName.CoffeeShop:
-      return <MaterialIcon icon="local_cafe" {...props} />
-    default:
-      return null
-  }
-}

apps/scandic-web/components/Icons/IllustrationByIconName.ts

@@ -1,48 +0,0 @@
-import BedIcon from "@scandic-hotels/design-system/Icons/BedIcon"
-import CoinIcon from "@scandic-hotels/design-system/Icons/CoinIcon"
-import CroissantCoffeeEggIcon from "@scandic-hotels/design-system/Icons/CroissantCoffeeEggIcon"
-import CutleryOneIcon from "@scandic-hotels/design-system/Icons/CutleryOneIcon"
-import CutleryTwoIcon from "@scandic-hotels/design-system/Icons/CutleryTwoIcon"
-import GiftOpenIcon from "@scandic-hotels/design-system/Icons/GiftOpenIcon"
-import HandKeyIcon from "@scandic-hotels/design-system/Icons/HandKeyIcon"
-import HotelNightIcon from "@scandic-hotels/design-system/Icons/HotelNightIcon"
-import KidsIcon from "@scandic-hotels/design-system/Icons/KidsIcon"
-import KidsMocktailIcon from "@scandic-hotels/design-system/Icons/KidsMocktailIcon"
-import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
-import MoneyHandIcon from "@scandic-hotels/design-system/Icons/MoneyHandIcon"
-import VoucherIcon from "@scandic-hotels/design-system/Icons/VoucherIcon"
-
-import { IconName } from "./iconName"
-
-export function IllustrationByIconName(iconName: IconName | null) {
-  switch (iconName) {
-    case IconName.Kids:
-      return KidsIcon
-    case IconName.KidsMocktail:
-      return KidsMocktailIcon
-    case IconName.MagicWand:
-      return MagicWandIcon
-    case IconName.MoneyHand:
-      return MoneyHandIcon
-    case IconName.HandKey:
-      return HandKeyIcon
-    case IconName.HotelNight:
-      return HotelNightIcon
-    case IconName.GiftOpen:
-      return GiftOpenIcon
-    case IconName.CutleryOne:
-      return CutleryOneIcon
-    case IconName.CutleryTwo:
-      return CutleryTwoIcon
-    case IconName.CroissantCoffeeEgg:
-      return CroissantCoffeeEggIcon
-    case IconName.Coin:
-      return CoinIcon
-    case IconName.Bed:
-      return BedIcon
-    case IconName.Voucher:
-      return VoucherIcon
-    default:
-      return null
-  }
-}

apps/scandic-web/components/Icons/iconName.ts

@@ -1,181 +0,0 @@
-export enum IconName {
-  Accesories = "Accesories",
-  Accessibility = "Accessibility",
-  AccountCircle = "AccountCircle",
-  Air = "Air",
-  AirConAirCooling = "AirConAirCooling",
-  AirConditioningInRoom = "AirConditioningInRoom",
-  Airplane = "Airplane",
-  ArmChair = "ArmChair",
-  ArrowLeft = "ArrowLeft",
-  ArrowLeftSmall = "ArrowLeftSmall",
-  ArrowFrom = "ArrowFrom",
-  ArrowRight = "ArrowRight",
-  ArrowRightSmall = "ArrowRightSmall",
-  ArrowTo = "ArrowTo",
-  AwardStar = "AwardStar",
-  Bar = "Bar",
-  BathroomCabinet = "BathroomCabinet",
-  Beach = "Beach",
-  BeautySalon = "BeautySalon",
-  Bed = "Bed",
-  Bike = "Bike",
-  Bouquet = "Bouquet",
-  Bowling = "Bowling",
-  Business = "Business",
-  BusinessCentre = "BusinessCentre",
-  Calendar = "Calendar",
-  Camera = "Camera",
-  CashFree = "CashFree",
-  Cellphone = "Cellphone",
-  Check = "Check",
-  CheckCircle = "CheckCircle",
-  ChevronDown = "ChevronDown",
-  ChevronDownSmall = "ChevronDownSmall",
-  ChevronLeft = "ChevronLeft",
-  ChevronLeftSmall = "ChevronLeftSmall",
-  ChevronRight = "ChevronRight",
-  ChevronRightSmall = "ChevronRightSmall",
-  ChevronUp = "ChevronUp",
-  ChevronUpSmall = "ChevronUpSmall",
-  Chips = "Chips",
-  City = "City",
-  Close = "Close",
-  CloseLarge = "CloseLarge",
-  CoffeeAlt = "CoffeeAlt",
-  CoffeeInReceptionAtCharge = "CoffeeInReceptionAtCharge",
-  CoffeeShop = "CoffeeShop",
-  Coin = "Coin",
-  ComplimentaryColdRefreshments = "ComplimentaryColdRefreshments",
-  Concierge = "Concierge",
-  ConferenceRoom = "ConferenceRoom",
-  ConvenienceStore24h = "ConvenienceStore24h",
-  ConventionCentre = "ConventionCentre",
-  CroissantCoffeeEgg = "CroissantCoffeeEgg",
-  CrossCircle = "CrossCircle",
-  CrossCircleOutline = "CrossCircleOutline",
-  Cultural = "Cultural",
-  CutleryOne = "CutleryOne",
-  CutleryTwo = "CutleryTwo",
-  Deck = "Deck",
-  Desk = "Desk",
-  Diamond = "Diamond",
-  Dining = "Dining",
-  DirectDial = "DirectDial",
-  Directions = "Directions",
-  DoorOpen = "DoorOpen",
-  Dresser = "Dresser",
-  ElectricBike = "ElectricBike",
-  ElectricCar = "ElectricCar",
-  Elevator = "Elevator",
-  Email = "Email",
-  ExternalLink = "ExternalLink",
-  ExtraFamilyFriendly = "ExtraFamilyFriendly",
-  EyeHide = "EyeHide",
-  EyeShow = "EyeShow",
-  Facebook = "Facebook",
-  Fan = "Fan",
-  Fax = "Fax",
-  Fitness = "Fitness",
-  FoodDrinks247 = "FoodDrinks247",
-  Footstool = "Footstool",
-  Gallery = "Gallery",
-  Gaming = "Gaming",
-  Garage = "Garage",
-  Gift = "Gift",
-  GiftOpen = "GiftOpen",
-  Globe = "Globe",
-  Golf = "Golf",
-  Guard = "Guard",
-  Hairdresser = "Hairdresser",
-  HairdryerInRoomAllScandic = "HairdryerInRoomAllScandic",
-  HandKey = "HandKey",
-  Hanger = "Hanger",
-  HangerAlt = "HangerAlt",
-  Heat = "Heat",
-  Heart = "Heart",
-  Hiking = "Hiking",
-  HotelNight = "HotelNight",
-  House = "House",
-  Houseboat = "Houseboat",
-  IceMachine = "IceMachine",
-  Image = "Image",
-  InfoCircle = "InfoCircle",
-  Instagram = "Instagram",
-  Ironing = "Ironing",
-  Jacuzzi = "Jaccuzzi",
-  Kayaking = "Kayaking",
-  Kettle = "Kettle",
-  Kids = "Kids",
-  KidsMocktail = "KidsMocktail",
-  Landscape = "Landscape",
-  Lamp = "Lamp",
-  LaptopSafe = "LaptopSafe",
-  LaundryMachine = "LaundryMachine",
-  Link = "Link",
-  LocalBar = "LocalBar",
-  Location = "Location",
-  Lock = "Lock",
-  Breakfast = "Breakfast",
-  Luggage = "Luggage",
-  LuggageLockers = "LuggageLockers",
-  MagicWand = "MagicWand",
-  Map = "Map",
-  Massage = "Massage",
-  Minibar = "Minibar",
-  Minus = "Minus",
-  MoneyHand = "MoneyHand",
-  Museum = "Museum",
-  Nature = "Nature",
-  Nightlife = "Nightlife",
-  NightShelter = "NightShelter",
-  NonSmoking = "NonSmoking",
-  NoSmoking = "NoSmoking",
-  OpenInNew = "OpenInNew",
-  OpenInNewSmall = "OpenInNewSmall",
-  OutdoorFurniture = "OutdoorFurniture",
-  PalmTree = "Palmtree",
-  Parking = "Parking",
-  ParkingOutdoor = "ParkingOutdoor",
-  Person = "Person",
-  Pets = "Pets",
-  Phone = "Phone",
-  Plus = "Plus",
-  PlusCircle = "PlusCircle",
-  Popcorn = "Popcorn",
-  PriceTag = "PriceTag",
-  RecordPlayer = "RecordPlayer",
-  Restaurant = "Restaurant",
-  RoomService = "RoomService",
-  SafetyBox = "SafetyBox",
-  Sauna = "Sauna",
-  Search = "Search",
-  Service = "Service",
-  Shopping = "Shopping",
-  Skateboarding = "Skateboarding",
-  Skiing = "Skiing",
-  Smoking = "Smoking",
-  Snowflake = "Snowflake",
-  Spa = "Spa",
-  Sports = "Sports",
-  Star = "Star",
-  StarFilled = "StarFilled",
-  Street = "Street",
-  Swim = "Swim",
-  Theatre = "Theatre",
-  Swipe = "Swipe",
-  Thermostat = "Thermostat",
-  Toilet = "Toilet",
-  Ticket = "Ticket",
-  Train = "Train",
-  Tripadvisor = "Tripadvisor",
-  Tshirt = "Tshirt",
-  TshirtWash = "TshirtWash",
-  TvCasting = "TvCasting",
-  TVRemote = "TVRemote",
-  Voucher = "Voucher",
-  WarningTriangle = "WarningTriangle",
-  Wheelchair = "Wheelchair",
-  Wifi = "Wifi",
-  Kitchen = "Kitchen",
-}

apps/scandic-web/components/Maps/Markers/Poi/index.tsx

@@ -1,4 +1,4 @@
-import { IconByIconName } from "@/components/Icons/IconByIconName"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 
 import { getIconByPoiGroupAndCategory } from "../utils"
 import { poiVariants } from "./variants"

apps/scandic-web/components/Maps/Markers/utils.ts

@@ -1,7 +1,6 @@
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { PointOfInterestGroupEnum } from "@scandic-hotels/trpc/enums/pointOfInterest"
 
-import { IconName } from "@/components/Icons/iconName"
-
 export function getIconByPoiGroupAndCategory(
   group: PointOfInterestGroupEnum,
   category?: string

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

@@ -2,10 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
-import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 
 import styles from "./sidePeekAccordion.module.css"

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx

@@ -3,10 +3,10 @@
 import { useIntl } from "react-intl"
 
 import { isDefined } from "@scandic-hotels/common/utils/isDefined"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
 
-import { IconName } from "@/components/Icons/iconName"
 import OpeningHours from "@/components/OpeningHours"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 

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

@@ -3,9 +3,9 @@
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 
 import styles from "./sidePeekAccordion.module.css"

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

@@ -2,10 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
-import { IconName } from "@/components/Icons/iconName"
 import ParkingInformation from "@/components/ParkingInformation"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 

apps/scandic-web/components/TabFilters/index.tsx

@@ -3,11 +3,10 @@
 import { cx } from "class-variance-authority"
 
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
+import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect"
 
 import useScrollShadows from "@/hooks/useScrollShadows"
 
-import IconByCSSelect from "../Icons/IconByCSSelect"
-
 import styles from "./tabFilters.module.css"
 
 interface Filter {

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts

@@ -1,7 +1,7 @@
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import type { VariantProps } from "class-variance-authority"
 import type { ReactNode } from "react"
 
-import type { IconName } from "@/components/Icons/iconName"
 import type { accordionItemVariants } from "./variants"
 
 export interface AccordionItemProps

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -3,10 +3,10 @@
 import { useRef } from "react"
 
 import Body from "@scandic-hotels/design-system/Body"
+import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import { IconByIconName } from "@/components/Icons/IconByIconName"
 import { trackAccordionClick } from "@/utils/tracking"
 
 import { accordionItemVariants } from "./variants"

apps/scandic-web/types/components/footer/socialIcons.ts

@@ -1,4 +1,4 @@
-import type { IconName } from "@/components/Icons/iconName"
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 
 export type SocialIconsProps = {
   iconName: IconName

apps/scandic-web/types/components/header/headerLink.ts

@@ -1,7 +1,6 @@
+import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import type { LinkProps } from "next/link"
 
-import type { IconName } from "@/components/Icons/iconName"
-
 export interface HeaderLinkProps extends React.PropsWithChildren {
   href: LinkProps["href"]
   iconName: IconName | null