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

packages/design-system/lib/components/Form/Compositions/ExampleForm.stories.tsx

@@ -5,7 +5,6 @@ import { FormProvider, useForm } from "react-hook-form"
 import { fn } from "storybook/test"
 import { z } from "zod"
 
-import { FormTextArea } from "../FormTextArea"
 import { Button } from "../../Button"
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { Typography } from "../../Typography"
@@ -44,9 +43,8 @@ function ExampleFormComponent({
   labelPosition = "floating",
   defaultValues,
   fieldPrefix = "",
-  textAreaDescription,
   textAreaError,
-  textAreaLabel = "Message",
+  textAreaDescription,
 }: ExampleFormProps) {
   const getFieldName = (name: string) =>
     fieldPrefix ? `${fieldPrefix}_${name}` : name
@@ -140,9 +138,10 @@ function ExampleFormComponent({
           labelPosition={labelPosition}
         />
 
-        <FormTextArea
+        <FormInput
           name={getFieldName("message")}
-          label={textAreaLabel || undefined}
+          label="Message"
+          labelPosition={labelPosition}
           registerOptions={{ required: true }}
           descriptionIcon="info"
           description={textAreaDescription}
@@ -201,9 +200,6 @@ export const Default: Story = {
   args: {
     onSubmit: fn(),
     labelPosition: "floating",
-    textAreaLabel: "Message",
-    textAreaDescription: "This is a custom description",
-    textAreaError: "",
   },
 }
 
@@ -531,7 +527,7 @@ function InputShowcase() {
               name="emailIcon"
               label="Email"
               type="email"
-              leftIcon={<MaterialIcon icon="email" />}
+              leftIcon={<MaterialIcon icon="mail" />}
             />
             <FormInput
               name="searchIcon"
@@ -562,7 +558,7 @@ function InputShowcase() {
               name="emailIconTop"
               label="Email"
               type="email"
-              leftIcon={<MaterialIcon icon="email" />}
+              leftIcon={<MaterialIcon icon="mail" />}
               labelPosition="top"
             />
             <FormInput
@@ -615,7 +611,7 @@ function InputShowcase() {
             <FormInput
               name="clearLeftRight"
               label="Clear with Left Icon"
-              leftIcon={<MaterialIcon icon="phone" />}
+              leftIcon={<MaterialIcon icon="phone_enabled" />}
               showClearContentIcon
             />
             <FormInput
@@ -627,7 +623,7 @@ function InputShowcase() {
             <FormInput
               name="clearBothIcons"
               label="Clear with Both Icon"
-              leftIcon={<MaterialIcon icon="email" />}
+              leftIcon={<MaterialIcon icon="mail" />}
               rightIcon={<MaterialIcon icon="lock" />}
               showClearContentIcon
             />