Target

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

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

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

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

.ai-target-icon .ring-inner,
.ai-target-icon .ring-mid,
.ai-target-icon .ring-outer {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-target-icon:not(.no-hover):hover .ring-inner {
  animation: ai-target-pulse 700ms ease-in-out;
}

.ai-target-icon:not(.no-hover):hover .ring-mid {
  animation: ai-target-pulse 700ms ease-in-out 120ms;
}

.ai-target-icon:not(.no-hover):hover .ring-outer {
  animation: ai-target-pulse 700ms ease-in-out 240ms;
}

@keyframes ai-target-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="ring-outer" fillRule="evenodd" d="M7.50061 0.899994C11.1454 0.900311 14.1002 3.8557 14.1002 7.50058C14.0999 11.1452 11.1452 14.0999 7.50061 14.1002C3.85573 14.1002 0.900341 11.1454 0.900024 7.50058C0.900024 3.8555 3.85554 0.899994 7.50061 0.899994ZM7.50061 1.80038C4.35259 1.80038 1.80042 4.35256 1.80042 7.50058C1.80073 10.6483 4.35279 13.1998 7.50061 13.1998C10.6481 13.1995 13.1995 10.6481 13.1998 7.50058C13.1998 4.35276 10.6483 1.8007 7.50061 1.80038Z" fill="currentColor"/>
        <path className="ring-mid" fillRule="evenodd" d="M7.49963 3.0748C9.94334 3.0748 11.9242 5.05592 11.9244 7.4996C11.9244 9.94344 9.94347 11.9244 7.49963 11.9244C5.05596 11.9242 3.07483 9.94331 3.07483 7.4996C3.07504 5.05606 5.05609 3.07502 7.49963 3.0748ZM7.49963 3.92441C5.52554 3.92463 3.92465 5.5255 3.92444 7.4996C3.92444 9.47387 5.52541 11.0746 7.49963 11.0748C9.47403 11.0748 11.0748 9.474 11.0748 7.4996C11.0746 5.52537 9.4739 3.92441 7.49963 3.92441Z" fill="currentColor"/>
        <path className="ring-inner" fillRule="evenodd" d="M7.49963 5.2496C8.74213 5.2496 9.74942 6.25714 9.74963 7.4996C9.74963 8.74224 8.74227 9.7496 7.49963 9.7496C6.25718 9.74938 5.24963 8.7421 5.24963 7.4996C5.24985 6.25728 6.25731 5.24982 7.49963 5.2496ZM7.49963 6.05038C6.69914 6.0506 6.05063 6.69911 6.05042 7.4996C6.05042 8.30027 6.69901 8.94958 7.49963 8.9498C8.30044 8.9498 8.94983 8.30041 8.94983 7.4996C8.94962 6.69897 8.30031 6.05038 7.49963 6.05038Z" fill="currentColor"/>
      </svg>
    </>
  );
}