Transform

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

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

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

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

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

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

@keyframes ai-transform-rotate {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(90deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="transform" d="M3.34219 0.854889C3.79593 0.901066 4.15079 1.28447 4.15079 1.7504V2.0502H10.85V1.7504C10.85 1.25334 11.2533 0.850006 11.7504 0.850006H13.2504L13.3422 0.854889C13.7959 0.901066 14.1508 1.28447 14.1508 1.7504V3.2504L14.1459 3.34219C14.0998 3.79584 13.7162 4.15059 13.2504 4.15079H12.9506V10.85H13.2504L13.3422 10.8549C13.7959 10.9011 14.1508 11.2845 14.1508 11.7504V13.2504L14.1459 13.3422C14.0998 13.7958 13.7162 14.1506 13.2504 14.1508H11.7504C11.2535 14.1508 10.8502 13.7473 10.85 13.2504V12.9506H4.15079V13.2504L4.1459 13.3422C4.09978 13.7958 3.71617 14.1506 3.2504 14.1508H1.7504C1.25347 14.1508 0.850218 13.7473 0.850006 13.2504V11.7504C0.850006 11.2533 1.25334 10.85 1.7504 10.85H2.0502V4.15079H1.7504C1.25347 4.15079 0.850217 3.74727 0.850006 3.2504V1.7504C0.850006 1.25334 1.25334 0.850006 1.7504 0.850006H3.2504L3.34219 0.854889ZM1.7504 13.2504H3.2504V11.7504H1.7504V13.2504ZM11.7504 13.2504H13.2504V11.7504H11.7504V13.2504ZM4.15079 2.95059V3.2504L4.1459 3.34219C4.09978 3.79584 3.71617 4.15059 3.2504 4.15079H2.95059V10.85H3.2504L3.34219 10.8549C3.79593 10.9011 4.15079 11.2845 4.15079 11.7504V12.0502H10.85V11.7504C10.85 11.2533 11.2533 10.85 11.7504 10.85H12.0502V4.15079H11.7504C11.2535 4.15079 10.8502 3.74727 10.85 3.2504V2.95059H4.15079ZM7.09219 5.10489C7.54593 5.15107 7.90079 5.53447 7.90079 6.0004V7.0004L7.8959 7.09219C7.89543 7.09681 7.89351 7.10127 7.89297 7.10587C7.92807 7.1017 7.96418 7.10001 8.0004 7.10001H9.0004L9.09219 7.10489C9.54593 7.15107 9.90079 7.53447 9.90079 8.0004V9.0004L9.8959 9.09219C9.84978 9.54584 9.46617 9.90059 9.0004 9.90079H8.0004C7.50347 9.90079 7.10022 9.49727 7.10001 9.0004V8.0004C7.10001 7.96418 7.1017 7.92807 7.10587 7.89297C7.07122 7.89704 7.03613 7.90077 7.0004 7.90079H6.0004C5.50347 7.90079 5.10022 7.49727 5.10001 7.0004V6.0004C5.10001 5.50334 5.50334 5.10001 6.0004 5.10001H7.0004L7.09219 5.10489ZM8.0004 9.0004H9.0004V8.0004H8.0004V9.0004ZM6.0004 7.0004H7.0004V6.0004H6.0004V7.0004ZM1.7504 3.2504H3.2504V1.7504H1.7504V3.2504ZM11.7504 3.2504H13.2504V1.7504H11.7504V3.2504Z" fill="currentColor"/>
      </svg>
    </>
  );
}