People

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

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

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

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

.ai-people-icon .left,
.ai-people-icon .right {
  transform-origin: center;
}

.ai-people-icon:not(.no-hover):hover .left {
  animation: ai-people-bob-left 700ms ease-in-out;
}

.ai-people-icon:not(.no-hover):hover .right {
  animation: ai-people-bob-right 700ms ease-in-out;
}

@keyframes ai-people-bob-left {
  0%, 40%, 100% { transform: translateY(0); }
  20% { transform: translateY(-1.2px); }
}

@keyframes ai-people-bob-right {
  0%, 50%, 100% { transform: translateY(0); }
  70% { transform: translateY(-1.2px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="left" fillRule="evenodd" d="M5 8.90039C6.43913 8.90046 7.6804 9.15211 8.5752 9.75488C9.50225 10.3797 10 11.3432 10 12.6006C9.99965 12.8763 9.77567 13.1003 9.5 13.1006C9.22426 13.1004 9.00035 12.8763 9 12.6006C9.00002 11.643 8.64164 11.0053 8.0166 10.584C7.35911 10.1411 6.3499 9.90046 5 9.90039C3.65022 9.90044 2.6409 10.1412 1.9834 10.584C1.35846 11.0053 1 11.643 1 12.6006C0.999652 12.8763 0.775703 13.1003 0.5 13.1006C0.224252 13.1004 0.000348561 12.8763 0 12.6006C0 11.3434 0.49706 10.3797 1.42383 9.75488C2.31864 9.15205 3.56076 8.90044 5 8.90039ZM5.00098 1.84961C6.74004 1.8502 8.15018 3.26085 8.15039 5C8.15018 6.73915 6.74004 8.14882 5.00098 8.14941C3.26141 8.14941 1.8508 6.73951 1.85059 5C1.8508 3.26048 3.26141 1.84961 5.00098 1.84961ZM5.00098 2.84961C3.81369 2.84961 2.8508 3.81277 2.85059 5C2.8508 6.18723 3.8137 7.14941 5.00098 7.14941C6.18775 7.14882 7.15018 6.18686 7.15039 5C7.15018 3.81313 6.18775 2.8502 5.00098 2.84961Z" fill="currentColor"/>
        <path className="right" d="M9.97461 8.90039C11.4139 8.9004 12.6549 9.15204 13.5498 9.75488C14.4771 10.3797 14.9746 11.343 14.9746 12.6006C14.9743 12.8764 14.7505 13.1006 14.4746 13.1006C14.1989 13.1004 13.975 12.8763 13.9746 12.6006C13.9746 11.6428 13.6165 11.0053 12.9912 10.584C12.4734 10.2352 11.7376 10.0138 10.7891 9.93457C10.5558 9.55417 10.2666 9.20728 9.91992 8.90137C9.93812 8.90129 9.95635 8.90039 9.97461 8.90039ZM9.97559 1.84961C11.7149 1.84994 13.1248 3.26069 13.125 5C13.1248 6.73931 11.7149 8.14908 9.97559 8.14941C9.45224 8.14941 8.95974 8.01975 8.52539 7.79395C8.73332 7.53194 8.91351 7.24709 9.05957 6.94238C9.33776 7.07372 9.64758 7.14941 9.97559 7.14941C11.1626 7.14908 12.1248 6.18703 12.125 5C12.1248 3.81297 11.1626 2.84994 9.97559 2.84961C9.64775 2.84961 9.33765 2.92435 9.05957 3.05566C8.91343 2.75109 8.73336 2.46598 8.52539 2.2041C8.95962 1.97833 9.45244 1.84961 9.97559 1.84961Z" fill="currentColor"/>
      </svg>
    </>
  );
}