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; }