Mix

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

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

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

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

.ai-mix-icon .circle,
.ai-mix-icon .cross,
.ai-mix-icon .triangle,
.ai-mix-icon .square {
  transform-origin: center;
}

.ai-mix-icon:not(.no-hover):hover .cross,
.ai-mix-icon:not(.no-hover):hover .triangle,
.ai-mix-icon:not(.no-hover):hover .square {
  animation: ai-mix-spin 700ms ease-in-out;
}

.ai-mix-icon:not(.no-hover):hover .circle {
  animation: ai-mix-flip 700ms ease-in-out;
}

@keyframes ai-mix-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes ai-mix-flip {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(0); }
  50% { transform: scaleX(-1); }
  75% { transform: scaleX(0); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="circle" fillRule="evenodd" d="M4.00018 1.24915C5.51931 1.24925 6.75114 2.48097 6.75116 4.00012C6.75105 5.5192 5.51926 6.75099 4.00018 6.7511C2.48103 6.75108 1.24931 5.51925 1.24921 4.00012C1.24922 2.48091 2.48098 1.24916 4.00018 1.24915ZM4.00018 2.14954C2.97803 2.14955 2.14961 2.97797 2.1496 4.00012C2.1497 5.0222 2.97809 5.85069 4.00018 5.85071C5.0222 5.8506 5.85066 5.02214 5.85077 4.00012C5.85075 2.97803 5.02226 2.14964 4.00018 2.14954Z" fill="currentColor"/>
        <path className="cross" d="M12.8068 1.55676C12.9826 1.38103 13.2678 1.38103 13.4435 1.55676C13.6191 1.73251 13.6192 2.01781 13.4435 2.19348L11.6369 4.00012L13.4435 5.80676L13.5012 5.87708C13.6165 6.05174 13.5973 6.2897 13.4435 6.44348C13.2898 6.59725 13.0518 6.61646 12.8771 6.5011L12.8068 6.44348L11.0002 4.63684L9.19354 6.44348C9.01787 6.61913 8.73257 6.61902 8.55682 6.44348C8.38109 6.26775 8.38111 5.9825 8.55682 5.80676L10.3635 4.00012L8.55682 2.19348L8.49921 2.12317C8.38371 1.94849 8.403 1.7106 8.55682 1.55676C8.71066 1.40293 8.94854 1.38364 9.12323 1.49915L9.19354 1.55676L11.0002 3.3634L12.8068 1.55676Z" fill="currentColor"/>
        <path className="triangle" fillRule="evenodd" d="M1.59979 8.82434C1.59991 8.32473 2.10284 7.99678 2.54999 8.17004L2.63885 8.21204L6.57245 10.3878L6.65741 10.4425C7.02571 10.7193 7.02591 11.282 6.65741 11.5587L6.57245 11.6134L2.63885 13.7892C2.17257 14.0469 1.60035 13.7095 1.59979 13.1769V8.82434ZM2.50018 12.8361L5.81952 11.0001L2.50018 9.16321V12.8361Z" fill="currentColor"/>
        <path className="square" fillRule="evenodd" d="M13.0002 8.29993C13.3867 8.30002 13.7004 8.61358 13.7004 9.00012V13.0001C13.7003 13.3866 13.3867 13.7002 13.0002 13.7003H9.00018C8.61362 13.7003 8.30004 13.3867 8.29999 13.0001V9.00012C8.29999 8.61352 8.61358 8.29993 9.00018 8.29993H13.0002ZM9.20038 12.7999H12.8V9.20032H9.20038V12.7999Z" fill="currentColor"/>
      </svg>
    </>
  );
}