Exit

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

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

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

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

.ai-exit-icon .arrow { transform-origin: center; }

.ai-exit-icon:not(.no-hover):hover .arrow {
  animation: ai-exit-motion 700ms ease-in-out;
}

@keyframes ai-exit-motion {
  0%, 50%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(1.5px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="frame" d="M10.4998 0.999984C10.776 0.999984 10.9998 1.22384 10.9998 1.49998C10.9998 1.77611 10.776 1.99997 10.4998 1.99997H2.99995V12.9998H10.4998C10.776 12.9998 10.9998 13.2236 10.9998 13.4998C10.9998 13.7759 10.776 13.9998 10.4998 13.9998H2.99995C2.44768 13.9998 1.99997 13.5521 1.99997 12.9998V1.99997C1.99997 1.44769 2.44768 0.999984 2.99995 0.999984H10.4998Z" fill="currentColor"/>
        <path className="arrow" d="M11.8963 4.8964C12.0672 4.72554 12.3311 4.70379 12.5252 4.83195L12.6033 4.8964L14.8533 7.14637L14.9177 7.22449C15.0459 7.41857 15.0241 7.68253 14.8533 7.85339L12.6033 10.1034C12.4081 10.2986 12.0915 10.2986 11.8963 10.1034C11.701 9.90809 11.701 9.59159 11.8963 9.39633L13.2928 7.99987H6.49989C6.22376 7.99987 5.9999 7.77602 5.9999 7.49988C5.9999 7.22374 6.22376 6.99989 6.49989 6.99989H13.2928L11.8963 5.60342L11.8318 5.5253C11.7037 5.33122 11.7254 5.06727 11.8963 4.8964Z" fill="currentColor"/>
      </svg>
    </>
  );
}