Lap Timer

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 lap-timer --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 LapTimerIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-lap-timer-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

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

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

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

.ai-lap-timer-icon .slice {
  transform-box: view-box;
  transform-origin: 7.5px 8.5px;
}

.ai-lap-timer-icon:not(.no-hover):hover .slice {
  animation: ai-lap-timer-tick 700ms linear;
}

@keyframes ai-lap-timer-tick {
  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.000210167 9.50037 0.223987 9.50037 0.5C9.50037 0.776013 9.27633 0.99979 9.00037 1H8.00037V2.12109C9.09875 2.20608 10.1186 2.56801 10.9916 3.1377C11.0114 3.1099 11.033 3.08255 11.058 3.05762L12.058 2.05762L12.1566 1.97754C12.3992 1.81778 12.7293 1.84422 12.9427 2.05762C13.156 2.27105 13.1826 2.60127 13.0228 2.84375L12.9427 2.94238L11.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="slice" d="M7.50037 8.5L10.6117 11.6113C9.81554 12.4075 8.71524 12.8993 7.50037 12.8994C5.07044 12.8994 3.10019 10.9299 3.09998 8.5C3.10017 6.07012 5.07044 4.09961 7.50037 4.09961V8.5Z" fill="currentColor"/>
      </svg>
    </>
  );
}