ConstThe props from Material-UI's SvgIcon component
An animated version of the provided icon
// 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>
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;
}
// Clone the child element to preserve its props
if (!isValidElement(props.children)) {
return null;
}
const child = cloneElement(props.children);
return (
<SpinningWrapper speed={speed} data-testid="spinning-wrapper">
{child}
</SpinningWrapper>
);
};
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.