Radiobutton

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

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

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

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

.ai-radiobutton-icon .dot {
  transform-origin: center;
}

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

@keyframes ai-radiobutton-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="ring" fillRule="evenodd" d="M7.49908 0.87706C11.1565 0.87706 14.1217 3.84179 14.1221 7.49913C14.1221 11.1568 11.1567 14.1222 7.49908 14.1222C3.84175 14.1218 0.877014 11.1565 0.877014 7.49913C0.877426 3.84205 3.842 0.877471 7.49908 0.87706ZM7.49908 1.82628C4.36667 1.82669 1.82664 4.36672 1.82623 7.49913C1.82623 10.6319 4.36642 13.1716 7.49908 13.172C10.6321 13.172 13.1719 10.6321 13.1719 7.49913C13.1715 4.36647 10.6318 1.82628 7.49908 1.82628Z" fill="currentColor"/>
        <path className="dot" d="M7.50006 5.50011C8.6046 5.50014 9.50006 6.39556 9.50006 7.50011C9.50001 8.60461 8.60457 9.50007 7.50006 9.50011C6.39552 9.50011 5.50011 8.60463 5.50006 7.50011C5.50006 6.39554 6.39549 5.50011 7.50006 5.50011Z" fill="currentColor"/>
      </svg>
    </>
  );
}