Reload

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

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

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

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

.ai-reload-icon .arrow {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-reload-icon:not(.no-hover):hover .arrow {
  animation: ai-reload-spin 700ms linear;
}

@keyframes ai-reload-spin {
  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="arrow" d="M7.50037 0.850006C10.6644 0.850189 12.2943 3.06869 12.9994 4.31094L13.0004 4.31192V2.5004C13.0004 2.22425 13.2242 2.0004 13.5004 2.0004C13.7763 2.00059 14.0004 2.22438 14.0004 2.5004V5.5004C14.0002 5.77625 13.7762 6.0002 13.5004 6.0004H10.5004C10.2243 6.0004 10.0006 5.77637 10.0004 5.5004C10.0004 5.22425 10.2242 5.0004 10.5004 5.0004H12.2328L12.1215 4.79239C11.4802 3.66597 10.1107 1.85019 7.50037 1.85001C4.06019 1.85001 1.84998 4.665 1.84998 7.5004C1.85018 10.3357 4.06034 13.1498 7.50037 13.1498C9.16525 13.1497 10.5296 12.496 11.5013 11.5072L11.6927 11.3031C12.126 10.8159 12.4715 10.2575 12.7172 9.66055L12.765 9.57071C12.8948 9.37795 13.1462 9.2963 13.3695 9.38809C13.6248 9.49314 13.7468 9.78515 13.642 10.0404L13.5111 10.3373C13.2362 10.9247 12.877 11.4767 12.4398 11.9682L12.2142 12.2084C11.062 13.3807 9.44396 14.1497 7.50037 14.1498C3.43771 14.1498 0.850179 10.8149 0.849976 7.5004C0.849976 4.1858 3.43755 0.850006 7.50037 0.850006Z" fill="currentColor"/>
      </svg>
    </>
  );
}