Shuffle

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

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

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

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

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

.ai-shuffle-icon:not(.no-hover):hover .shuffle {
  animation: ai-shuffle-swap 700ms ease-in-out;
}

@keyframes ai-shuffle-swap {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(0); }
  50% { transform: scaleY(-1); }
  75% { transform: scaleY(0); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="shuffle" d="M8.08984 8.12814C8.58453 8.79296 9.05295 9.39787 9.56543 9.88986C10.2892 10.5846 11.0465 11.0002 12 11.0002H12.793L11.6465 9.85372L11.582 9.7756C11.4539 9.58152 11.4756 9.31756 11.6465 9.14669C11.8173 8.97583 12.0813 8.95407 12.2754 9.08224L12.3535 9.14669L14.3535 11.1467C14.5488 11.342 14.5488 11.6585 14.3535 11.8537L12.3535 13.8537C12.1583 14.049 11.8417 14.049 11.6465 13.8537C11.4512 13.6585 11.4512 13.342 11.6465 13.1467L12.793 12.0002H12C10.7037 12.0002 9.7107 11.4156 8.87207 10.6106C8.37205 10.1305 7.90974 9.55042 7.45801 8.95138C7.64654 8.71441 7.8276 8.48007 8 8.25021C8.03055 8.20947 8.05987 8.16831 8.08984 8.12814ZM11.6465 1.14669C11.8173 0.975828 12.0813 0.954074 12.2754 1.08224L12.3535 1.14669L14.3535 3.14669L14.418 3.22482C14.5461 3.4189 14.5244 3.68286 14.3535 3.85372L12.3535 5.85372C12.1583 6.04899 11.8417 6.04899 11.6465 5.85372C11.4512 5.65846 11.4512 5.34195 11.6465 5.14669L12.793 4.00021H12C11.0465 4.00021 10.2892 4.41586 9.56543 5.11056C8.82263 5.82365 8.17078 6.7728 7.40039 7.80001C5.89165 9.81166 4.00963 12.0002 0.5 12.0002C0.223858 12.0002 0 11.7764 0 11.5002C0 11.2241 0.223858 11.0002 0.5 11.0002C3.49021 11.0002 5.10841 9.18863 6.59961 7.2004C7.329 6.22788 8.05261 5.17665 8.87207 4.38986C9.7107 3.58478 10.7037 3.00021 12 3.00021H12.793L11.6465 1.85372L11.582 1.7756C11.4539 1.58152 11.4756 1.31756 11.6465 1.14669ZM0.5 3.00021C3.35242 3.00021 5.1293 4.44621 6.50488 6.06759C6.3319 6.30165 6.16402 6.53151 6 6.75021C5.96377 6.79852 5.92681 6.846 5.89062 6.89376C4.57223 5.29373 3.0261 4.00021 0.5 4.00021C0.223858 4.00021 0 3.77635 0 3.50021C0 3.22406 0.223858 3.00021 0.5 3.00021Z" fill="currentColor"/>
      </svg>
    </>
  );
}