Merged in feat/svg-instead-of-fonts (pull request #3411)

feat(SW-3695): use svg icons instead of font icons

* feat(icons): use svg instead of font icons

* feat(icons): use webpack/svgr for inlined svgs. Now support for isFilled again

* Merge master

* Remove old font icon


Approved-by: Joakim Jäderberg

apps/partner-sas/next.config.ts

@@ -3,6 +3,14 @@ import * as Sentry from "@sentry/nextjs"
 import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
   env: {
     BRANCH: process.env.BRANCH || "local",
     GIT_SHA: process.env.COMMIT_REF || "",

apps/partner-sas/package.json

@@ -45,6 +45,7 @@
     "@playwright/test": "^1.53.1",
     "@scandic-hotels/common": "workspace:*",
     "@scandic-hotels/typescript-config": "workspace:*",
+    "@svgr/webpack": "^8.1.0",
     "@swc/plugin-formatjs": "^3.2.2",
     "@types/node": "^20",
     "@types/react": "19.2.7",

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -93,7 +93,11 @@ export default async function IntroSection({
           >
             <div className={styles.phoneNumber}>
               <TextLink href={`tel:${phoneNumber}`} typography="Link/sm">
-                <MaterialIcon icon="phone" color="CurrentColor" size={20} />
+                <MaterialIcon
+                  icon="phone_enabled"
+                  color="CurrentColor"
+                  size={20}
+                />
                 {phoneNumber}
               </TextLink>
               <LocalCallCharges
@@ -109,7 +113,7 @@ export default async function IntroSection({
               />
             )}
             <TextLink href={`mailto:${email}`} typography="Link/sm">
-              <MaterialIcon icon="email" color="CurrentColor" size={20} />
+              <MaterialIcon icon="mail" color="CurrentColor" size={20} />
               {email}
             </TextLink>
           </div>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx

@@ -3,8 +3,8 @@ import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { TextArea } from "@scandic-hotels/design-system/TextArea"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { TextArea } from "@scandic-hotels/design-system/TextArea"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import SelectDeliveryTime from "./SelectDeliveryTime"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ActionsButton/index.tsx

@@ -1,19 +1,20 @@
 "use client"
 
 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import {
+  MaterialIcon,
+  type MaterialIconProps,
+} from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import styles from "./actionsButton.module.css"
 
-import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"
-
 export default function ActionsButton({
   icon,
   text,
   onPress,
   isDisabled = false,
 }: {
-  icon: MaterialSymbolProps["icon"]
+  icon: MaterialIconProps["icon"]
   text: string
   onPress: () => void
   isDisabled?: boolean

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ResendConfirmationEmail/index.tsx

@@ -66,7 +66,7 @@ export default function ResendConfirmationEmail({
     <ActionsButton
       onPress={resendConfirmationEmail}
       isDisabled={resendEmail.isPending}
-      icon="email"
+      icon="mail"
       text={printMsg}
     />
   )

apps/scandic-web/components/MyPages/Profile/index.tsx

@@ -84,7 +84,7 @@ export default async function Profile() {
       value: user.dateOfBirth,
     },
     {
-      icon: "phone",
+      icon: "phone_enabled",
       label: intl.formatMessage({
         id: "common.phoneNumber",
         defaultMessage: "Phone number",

apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -67,7 +67,7 @@ export default async function ContactRow({ contact }: ContactRowProps) {
 }
 
 function PhoneIcon(props: MaterialIconSetIconProps) {
-  return <MaterialIcon icon="phone" {...props} />
+  return <MaterialIcon icon="phone_enabled" {...props} />
 }
 function MailIcon(props: MaterialIconSetIconProps) {
   return <MaterialIcon icon="mail" {...props} />

apps/scandic-web/components/utils.ts

@@ -1,6 +1,6 @@
-import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"
+import type { MaterialIconProps } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-export function getBedIconName(name: string): MaterialSymbolProps["icon"] {
+export function getBedIconName(name: string): MaterialIconProps["icon"] {
   const iconMappings = [
     {
       icon: "bed",
@@ -25,5 +25,5 @@ export function getBedIconName(name: string): MaterialSymbolProps["icon"] {
   ]
 
   const icon = iconMappings.find((icon) => icon.texts.includes(name))
-  return icon ? (icon.icon as MaterialSymbolProps["icon"]) : "single_bed"
+  return icon ? (icon.icon as MaterialIconProps["icon"]) : "single_bed"
 }

apps/scandic-web/next.config.ts

@@ -18,13 +18,21 @@ import {
   myStay as myStayWebview,
   preliminaryReceipt as preliminaryReceiptWebview,
 } from "./constants/routes/webviews"
+import { NextConfig } from "next"
 
 const jiti = createJiti(fileURLToPath(import.meta.url))
 jiti("./env/server")
 jiti("./env/client")
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
   env: {
     BRANCH: process.env.BRANCH || "local",
     GIT_SHA: process.env.COMMIT_REF || "",

apps/scandic-web/package.json

@@ -94,6 +94,7 @@
     "@playwright/test": "^1.57.0",
     "@react-aria/test-utils": "1.0.0-alpha.8",
     "@scandic-hotels/typescript-config": "workspace:*",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/adm-zip": "^0.5.7",