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/Footer/Details/SocialLink/index.tsx

@@ -1,15 +1,17 @@
 "use client"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { IconByIconName } from "@/components/Icons/IconByIconName"
 import { trackSocialMediaClick } from "@/utils/tracking"
 
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import type { SocialLinkProps } from "@/types/components/footer/socialLink"
-import type { IconName } from "@/types/components/icon"
+import type { IconName } from "@/components/Icons/iconName"
 
 function SocialIcon({ iconName }: SocialIconsProps) {
-  const SocialIcon = getIconByIconName(iconName as IconName)
-  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
+  const SocialIcon = (
+    <IconByIconName iconName={iconName} color="Icon/Inverted" />
+  )
+  return SocialIcon ? SocialIcon : <span>{iconName}</span>
 }
 
 export default function SocialLink({ link }: SocialLinkProps) {
@@ -23,7 +25,7 @@ export default function SocialLink({ link }: SocialLinkProps) {
       aria-label={title}
       onClick={() => trackSocialMediaClick(title)}
     >
-      <SocialIcon iconName={title} />
+      <SocialIcon iconName={title as IconName} />
     </a>
   )
 }

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { ArrowRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -25,7 +26,10 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
                 onClick={() => trackFooterClick("main", link.title)}
               >
                 {link.title}
-                <ArrowRightIcon color="peach80" />
+                <MaterialIcon
+                  icon="arrow_forward"
+                  color="Icon/Interactive/Secondary"
+                />
               </Link>
             </Subtitle>
           </li>
@@ -46,7 +50,10 @@ export function FooterMainNavSkeleton() {
             <Subtitle color="baseTextHighContrast" type="two" asChild>
               <span className={styles.mainNavigationLink}>
                 <SkeletonShimmer width="80%" />
-                <ArrowRightIcon color="peach80" />
+                <MaterialIcon
+                  icon="arrow_forward"
+                  color="Icon/Interactive/Secondary"
+                />
               </span>
             </Subtitle>
           </li>