feat(board): allow to set icon color of widgets (#2228)

Co-authored-by: Andre Silva <asilva01@acuitysso.com>

packages/ui/src/components/masked-image.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { getThemeColor, useMantineTheme } from "@mantine/core";
+import type { MantineColor } from "@mantine/core";
+import combineClasses from "clsx";
+import type { Property } from "csstype";
+
+import classes from "./masked-image.module.css";
+
+interface MaskedImageProps {
+  imageUrl: string;
+  color: MantineColor;
+  alt?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  maskSize?: Property.MaskSize;
+  maskRepeat?: Property.MaskRepeat;
+  maskPosition?: Property.MaskPosition;
+}
+
+export const MaskedImage = ({
+  imageUrl,
+  color,
+  alt,
+  style,
+  className,
+  maskSize = "contain",
+  maskRepeat = "no-repeat",
+  maskPosition = "center",
+}: MaskedImageProps) => {
+  const theme = useMantineTheme();
+
+  return (
+    <div
+      className={combineClasses(classes.maskedImage, className)}
+      role="img"
+      aria-label={alt}
+      style={
+        {
+          ...style,
+          "--image-color": getThemeColor(color, theme),
+          maskSize,
+          maskRepeat,
+          maskPosition,
+          maskImage: `url(${imageUrl})`,
+        } as React.CSSProperties
+      }
+    />
+  );
+};