Move

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

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

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

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

.ai-move-icon .arrow-up,
.ai-move-icon .arrow-down,
.ai-move-icon .arrow-left,
.ai-move-icon .arrow-right {
  transform-origin: center;
}

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

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

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

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

@keyframes ai-move-push-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2px); }
}

@keyframes ai-move-push-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1.2px); }
}

@keyframes ai-move-push-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1.2px); }
}

@keyframes ai-move-push-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.2px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="arrow-down" d="M7.50016 9.0002C7.77622 9.00031 8.00016 9.22413 8.00016 9.5002V12.6135L8.9318 11.6818C9.10754 11.5061 9.39279 11.5061 9.56852 11.6818C9.74406 11.8576 9.74419 12.1429 9.56852 12.3186L7.81852 14.0686C7.66475 14.2223 7.42679 14.2415 7.25212 14.1262L7.18181 14.0686L5.43181 12.3186L5.37419 12.2483C5.25867 12.0736 5.27796 11.8357 5.43181 11.6818C5.58565 11.528 5.82352 11.5087 5.99821 11.6242L6.06852 11.6818L7.00016 12.6135V9.5002C7.00016 9.22406 7.22402 9.0002 7.50016 9.0002Z" fill="currentColor"/>
        <path className="arrow-right" d="M11.6818 5.43185C11.8356 5.278 12.0735 5.25871 12.2482 5.37423L12.3185 5.43185L14.0685 7.18185L14.1261 7.25216C14.2415 7.42683 14.2223 7.66479 14.0685 7.81856L12.3185 9.56856C12.1429 9.74424 11.8576 9.7441 11.6818 9.56856C11.5061 9.39283 11.5061 9.10758 11.6818 8.93184L12.6134 8.0002H9.50016C9.22409 8.0002 9.00027 7.77626 9.00016 7.5002C9.00016 7.22406 9.22402 7.0002 9.50016 7.0002H12.6134L11.6818 6.06856L11.6242 5.99825C11.5087 5.82356 11.528 5.58569 11.6818 5.43185Z" fill="currentColor"/>
        <path className="arrow-left" d="M2.6818 5.43185C2.85754 5.25611 3.14279 5.25611 3.31852 5.43185C3.49406 5.6076 3.49419 5.89289 3.31852 6.06856L2.38688 7.0002H5.50016L5.60075 7.00997C5.8286 7.05658 6.00016 7.25857 6.00016 7.5002C6.00007 7.74178 5.82858 7.94387 5.60075 7.99044L5.50016 8.0002H2.38688L3.31852 8.93184L3.37614 9.00216C3.49149 9.17683 3.4723 9.41479 3.31852 9.56856C3.16475 9.72234 2.92679 9.74153 2.75212 9.62618L2.6818 9.56856L0.931805 7.81856C0.756069 7.64283 0.756069 7.35758 0.931805 7.18185L2.6818 5.43185Z" fill="currentColor"/>
        <path className="arrow-up" d="M7.25212 0.874228C7.42681 0.758749 7.66469 0.778015 7.81852 0.931845L9.56852 2.68185L9.62614 2.75216C9.74149 2.92683 9.7223 3.16479 9.56852 3.31856C9.41475 3.47234 9.17679 3.49153 9.00212 3.37618L8.9318 3.31856L8.00016 2.38692V5.5002L7.9904 5.60079C7.94383 5.82862 7.74174 6.00011 7.50016 6.0002C7.25853 6.0002 7.05654 5.82864 7.00993 5.60079L7.00016 5.5002V2.38692L6.06852 3.31856C5.89285 3.49423 5.60756 3.4941 5.43181 3.31856C5.25607 3.14283 5.25607 2.85758 5.43181 2.68185L7.18181 0.931845L7.25212 0.874228Z" fill="currentColor"/>
      </svg>
    </>
  );
}