Variable IconSpinner`Const`

IconSpinner: FC<IconSpinnerProps> = ...

A component that adds a spinning animation to any icon component passed as a child. The component preserves any existing styles while adding the spinning animation.

Component

Param: props

The props from Material-UI's SvgIcon component

Returns

An animated version of the provided icon

Example

// Simple icon with default size and speed
<IconSpinner>
  <MyIcon />
</IconSpinner>

// Icon with custom size, default speed
<IconSpinner>
  <MyIcon style={{ width: 100, height: 100 }} />
</IconSpinner>

// Icon with custom speed (as string)
<IconSpinner speed={"fast"}>
  <MyIcon style={{ width: 100, height: 100 }} />
</IconSpinner>

// Icon with custom speed (as number)
<IconSpinner speed={2}>
  <MyIcon style={{ width: 100, height: 100 }} />
</IconSpinner>

// Icon with custom speed from SpinSpeeds enum
<IconSpinner speed={SpinSpeeds.MEDIUM}>
  <MyIcon style={{ width: 100, height: 100 }} />
</IconSpinner>

Source

const IconSpinner: FC<IconSpinnerProps> = (props: IconSpinnerProps) => {
  let { speed = 2 } = props;

  if (typeof speed === "string") {
    const key = speed.toUpperCase();
    speed = isSpinSpeed(key) ? SPIN_SPEED[key] : SPIN_SPEED.MEDIUM;
  }

  const spin = keyframes`
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
`;

  const SpinningWrapper = styled("div")({
    display: "inline-flex",
    animation: `${spin} ${speed}s linear infinite`,
  });
  // Clone the child element to preserve its props
  if (!isValidElement(props.children)) {
    return null;
  }
  const child = cloneElement(props.children);
  return <SpinningWrapper data-testid="spinning-wrapper">{child}</SpinningWrapper>;
};