Scissors

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

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

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

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

.ai-scissors-icon .top,
.ai-scissors-icon .bottom {
  transform-box: view-box;
  transform-origin: 6.5px 7.5px;
}

.ai-scissors-icon:not(.no-hover):hover .bottom {
  animation: ai-scissors-close-bottom 700ms ease-in-out;
}

.ai-scissors-icon:not(.no-hover):hover .top {
  animation: ai-scissors-close-top 700ms ease-in-out;
}

@keyframes ai-scissors-close-bottom {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(18deg); }
}

@keyframes ai-scissors-close-top {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-18deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="bottom" fillRule="evenodd" d="M4.77552 9.59498C4.88703 9.87512 4.95032 10.1804 4.95032 10.5002C4.95011 11.8531 3.85302 12.9503 2.50015 12.9504C1.1472 12.9504 0.0501965 11.8531 0.0499872 10.5002C0.0499872 9.14716 1.14707 8.05007 2.50015 8.05007C3.17229 8.05012 3.78109 8.32067 4.22376 8.75905L6.42686 7.28739L6.67979 6.38017C6.75165 6.12313 6.92313 5.9055 7.15635 5.77569L10.2305 4.06477C11.4087 3.40911 12.7079 2.99869 14.0488 2.85775L15 2.75717L4.77552 9.59498ZM2.50015 8.95045C1.64412 8.95045 0.950367 9.64421 0.950367 10.5002C0.950576 11.3561 1.64425 12.05 2.50015 12.05C3.35597 12.0499 4.04973 11.356 4.04994 10.5002C4.04994 9.64427 3.3561 8.95056 2.50015 8.95045Z" fill="currentColor"/>
        <path className="top" fillRule="evenodd" d="M15 12.2405L14.0488 12.1399C12.7082 11.999 11.4095 11.5883 10.2315 10.9328L7.15635 9.22193C7.15236 9.21971 7.14856 9.21644 7.14463 9.21412L8.81062 8.09988L15 12.2405ZM2.50015 2.03452C3.85314 2.03463 4.95032 3.13167 4.95032 4.48469C4.95029 4.80808 4.88549 5.11608 4.77161 5.39874L5.73742 6.04521L5.71593 6.1126L5.56262 6.66239L5.21008 6.89774L4.214 6.23271C3.77206 6.66606 3.16792 6.9348 2.50015 6.93485C1.14714 6.93485 0.0500929 5.83768 0.0499872 4.48469C0.0499872 3.13161 1.14707 2.03452 2.50015 2.03452ZM2.50015 2.9349C1.64412 2.9349 0.950367 3.62866 0.950367 4.48469C0.950472 5.34063 1.64419 6.03447 2.50015 6.03447C3.35603 6.03437 4.04983 5.34056 4.04994 4.48469C4.04994 3.62872 3.35609 2.93501 2.50015 2.9349Z" fill="currentColor"/>
      </svg>
    </>
  );
}