Stopwatch

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add stopwatch --react

Code

React

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function StopwatchIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-stopwatch-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-stopwatch-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-stopwatch-icon * {
  transform-box: fill-box;
}

.ai-stopwatch-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-stopwatch-icon .hand {
  transform-box: view-box;
  transform-origin: 7.5px 8.5px;
}

.ai-stopwatch-icon:not(.no-hover):hover .hand {
  animation: ai-stopwatch-sweep 700ms linear;
}

@keyframes ai-stopwatch-sweep {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="body" d="M9.00037 0C9.27633 0.000211196 9.50037 0.223988 9.50037 0.5C9.50037 0.776012 9.27633 0.999789 9.00037 1H8.00037V2.12109C9.09904 2.2061 10.1194 2.56775 10.9926 3.1377C11.0122 3.11025 11.0334 3.08326 11.058 3.05859L11.5267 3.52734C11.5276 3.52808 11.5288 3.52856 11.5297 3.5293L11.5004 3.5L11.058 3.05859L11.8588 2.25781C12.1028 2.01426 12.4986 2.014 12.7426 2.25781C12.9863 2.50188 12.9864 2.89859 12.7426 3.14258L11.9662 3.91797C13.1585 5.08042 13.8997 6.70335 13.8998 8.5C13.8996 12.0343 11.0347 14.8992 7.50037 14.8994C3.96587 14.8994 1.10019 12.0344 1.09998 8.5C1.10016 5.13385 3.69958 2.37627 7.00037 2.12109V1H6.00037C5.72422 1 5.50037 0.776142 5.50037 0.5C5.50037 0.223858 5.72422 0 6.00037 0H9.00037ZM7.50037 3.09961C4.51815 3.09961 2.10017 5.51783 2.09998 8.5C2.10019 11.4822 4.51816 13.8994 7.50037 13.8994C10.4824 13.8992 12.8996 11.482 12.8998 8.5C12.8996 5.51796 10.4824 3.09982 7.50037 3.09961Z" fill="currentColor"/>
        <path className="hand" d="M7.50037 4C7.77633 4.00021 8.00037 4.22399 8.00037 4.5V9.5C8.00037 9.77601 7.77633 9.99979 7.50037 10C7.22422 10 7.00037 9.77614 7.00037 9.5V4.5C7.00037 4.22386 7.22422 4 7.50037 4Z" fill="currentColor"/>
      </svg>
    </>
  );
}