UI Component Code Gallery for React - by Mirado Andria

Icon Frame A

Icon frame with solid background color.

Preview

Code

import React from "react";
import styles from "./icon-frame-a.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  size?: "x-small" | "small" | "medium" | "large";
  shadow?: "default" | "none" | "medium";
  rounded?: "none" | "small" | "medium" | "large" | "full";
  hoverAnimation?: "none" | "shadow";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "blue" | "blue-light" | "blue-material";
};

export default function IconFrameA({
  className,
  children,
  size = "medium",
  shadow,
  hoverAnimation,
  rounded = "medium",
  variant = "default",
}: Props) {
  return (
    <div
      className={[
        styles["wrapper"],
        size && styles[`s-${size}`],
        rounded && styles[`r-${rounded}`],
        shadow && styles[`sh-${shadow}`],
        hoverAnimation && styles[`ha-${hoverAnimation}`],
        styles[`variant-${variant}`],
        className,
      ].join(" ")}
    >
      {children}
    </div>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • title (string or ReactNode): Specifies the text that will be used as the title.
  • size ("x-small" | "small" | "medium" | "large" ): Specifies the size of the frame.
  • shadow ("default" | "small" | "medium"): Specifies the size of the shadow of the frame.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • hoverAnimation ("none" | "shadow" ): animation on hoverA.
  • variant ("default" | "blue" | "blue-light" | "blue-material" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
Sample CSS customization
.variant-blue-light {
    --fg-color: #567FEF;
    --bg-color: #EBF0FF;
}