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/Icons/MaterialIcon/index.tsx

@@ -1,5 +1,65 @@
-export {
-  MaterialIcon,
-  type MaterialIconProps,
-  type MaterialIconSetIconProps,
-} from "./MaterialIcon"
+import { HTMLAttributes } from "react"
+import { MaterialIconName, materialIcons } from "./generated"
+import { VariantProps } from "class-variance-authority"
+import { iconVariants } from "../variants"
+import styles from "./index.module.css"
+
+export interface MaterialIconProps
+  extends
+    Omit<HTMLAttributes<HTMLOrSVGElement>, "color" | "id">,
+    VariantProps<typeof iconVariants> {
+  icon: MaterialIconName
+  size?: number
+  styleName?: "outlined" | "rounded" | "sharp"
+  isFilled?: boolean
+}
+
+export type MaterialIconSetIconProps = Omit<MaterialIconProps, "icon">
+
+export function MaterialIcon({
+  icon,
+  size = 24,
+  styleName = "outlined",
+  color = "CurrentColor",
+  isFilled,
+  ...props
+}: MaterialIconProps) {
+  const iconStyles = materialIcons[icon]
+
+  if (!iconStyles) {
+    console.warn(`Icon "${icon}" not found in registry`)
+    return null
+  }
+
+  const styleVariants = iconStyles[styleName]
+
+  if (!styleVariants) {
+    console.warn(`Icon "${icon}" does not have style "${styleName}"`)
+    return null
+  }
+
+  const IconComponent = isFilled ? styleVariants.filled : styleVariants.outlined
+
+  if (!IconComponent) {
+    console.warn(
+      `Icon "${icon}" does not have ${
+        isFilled ? "filled" : "outlined"
+      } variant for style "${styleName}"`
+    )
+    return null
+  }
+
+  const iconClassName = iconVariants({ color })
+
+  return (
+    <span className={`${styles.iconWrapper}`} {...props}>
+      <IconComponent
+        width={size}
+        height={size}
+        className={iconClassName}
+        aria-hidden
+        focusable={false}
+      />
+    </span>
+  )
+}