feat: introduce font picker (#8012)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/components/ButtonIcon.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+
+import "./ButtonIcon.scss";
+
+interface ButtonIconProps {
+  icon: JSX.Element;
+  title: string;
+  className?: string;
+  testId?: string;
+  /** if not supplied, defaults to value identity check */
+  active?: boolean;
+  /** include standalone style (could interfere with parent styles) */
+  standalone?: boolean;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
+  (props, ref) => {
+    const { title, className, testId, active, standalone, icon, onClick } =
+      props;
+    return (
+      <button
+        type="button"
+        ref={ref}
+        key={title}
+        title={title}
+        data-testid={testId}
+        className={clsx(className, { standalone, active })}
+        onClick={onClick}
+      >
+        {icon}
+      </button>
+    );
+  },
+);