Merged in feat/SW-1711-SW-2077-icons (pull request #1709)

Fix(SW-1711)/(SW-2077): Export icons individually

* fix(SW-1711): export icons individually


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

apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"

apps/scandic-web/components/TempDesignSystem/Alert/index.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Link from "../Link"
 import AlertSidepeek from "./Sidepeek"
-import { getIconByAlertType } from "./utils"
+import { IconByAlertType } from "./utils"
 import { alertVariants } from "./variants"
 
 import styles from "./alert.module.css"
@@ -33,7 +33,6 @@ export default function Alert({
     variant,
     type,
   })
-  const Icon = getIconByAlertType(type)
 
   if (!text && !heading) {
     return null
@@ -42,7 +41,7 @@ export default function Alert({
     <section className={classNames} role={ariaRole} aria-live={ariaLive}>
       <div className={styles.content}>
         <span className={styles.iconWrapper}>
-          <Icon className={styles.icon} size={24} />
+          <IconByAlertType alertType={type} className={styles.icon} />
         </span>
         <div className={styles.innerContent}>
           <div className={styles.textWrapper}>

apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx

@@ -1,41 +1,36 @@
-/* eslint-disable react/display-name */
 import {
   MaterialIcon,
   type MaterialIconSetIconProps,
-} from "@scandic-hotels/design-system/Icons"
+} from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { AlertTypeEnum } from "@/types/enums/alert"
 
-export function getIconByAlertType(alertType: AlertTypeEnum) {
+interface IconByAlertProps {
+  alertType: AlertTypeEnum
+}
+
+export function IconByAlertType({
+  alertType,
+  ...props
+}: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
   switch (alertType) {
     case AlertTypeEnum.Alarm:
-      return function (props: MaterialIconSetIconProps) {
-        return (
-          <MaterialIcon
-            color="Icon/Inverted"
-            isFilled
-            icon="cancel"
-            {...props}
-          />
-        )
-      }
+      return (
+        <MaterialIcon color="Icon/Inverted" isFilled icon="cancel" {...props} />
+      )
     case AlertTypeEnum.Warning:
-      return function (props: MaterialIconSetIconProps) {
-        return (
-          <MaterialIcon
-            icon="warning"
-            color="Icon/Inverted"
-            isFilled
-            {...props}
-          />
-        )
-      }
+      return (
+        <MaterialIcon
+          icon="warning"
+          color="Icon/Inverted"
+          isFilled
+          {...props}
+        />
+      )
     case AlertTypeEnum.Info:
     default:
-      return function (props: MaterialIconSetIconProps) {
-        return (
-          <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
-        )
-      }
+      return (
+        <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
+      )
   }
 }