Magic Wand

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

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

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

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

.ai-magic-wand-icon .wand {
  transform-box: view-box;
  transform-origin: 2.5px 12.5px;
}

.ai-magic-wand-icon .spark-near,
.ai-magic-wand-icon .spark-mid,
.ai-magic-wand-icon .spark-far {
  transform-origin: center;
}

.ai-magic-wand-icon:not(.no-hover):hover .wand {
  animation: ai-magic-wand-wave 700ms ease-in-out;
}

.ai-magic-wand-icon:not(.no-hover):hover .spark-near {
  animation: ai-magic-wand-twinkle-near 700ms ease-in-out;
}

.ai-magic-wand-icon:not(.no-hover):hover .spark-mid {
  animation: ai-magic-wand-twinkle-mid 700ms ease-in-out;
}

.ai-magic-wand-icon:not(.no-hover):hover .spark-far {
  animation: ai-magic-wand-twinkle-far 700ms ease-in-out;
}

@keyframes ai-magic-wand-wave {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-12deg); }
  70% { transform: rotate(8deg); }
}

@keyframes ai-magic-wand-twinkle-near {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.4) rotate(15deg); }
  30% { transform: scale(1); }
}

@keyframes ai-magic-wand-twinkle-mid {
  0%, 40%, 100% { transform: scale(1); }
  55% { transform: scale(1.4) rotate(-15deg); }
  70% { transform: scale(1); }
}

@keyframes ai-magic-wand-twinkle-far {
  0%, 65%, 100% { transform: scale(1); }
  80% { transform: scale(1.4) rotate(15deg); }
  95% { transform: scale(1); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="wand" d="M9.22447 5.0824C9.41855 4.95423 9.68251 4.97599 9.85338 5.14685C10.0241 5.31772 10.046 5.58175 9.91783 5.77576L9.85338 5.85388L2.85338 12.8539C2.65817 13.0489 2.34156 13.0489 2.14635 12.8539C1.95115 12.6587 1.95128 12.3421 2.14635 12.1469L9.14635 5.14685L9.22447 5.0824ZM11.2245 3.0824C11.4186 2.95424 11.6825 2.97599 11.8534 3.14685C12.0241 3.31772 12.0459 3.58175 11.9178 3.77576L11.8534 3.85388L10.8534 4.85388C10.6582 5.04888 10.3416 5.04889 10.1463 4.85388C9.95116 4.65869 9.95129 4.34213 10.1463 4.14685L11.1463 3.14685L11.2245 3.0824Z" fill="currentColor"/>
        <path className="spark-near" d="M13.4999 5.09998C13.7208 5.09998 13.9003 5.27945 13.9003 5.50037V6.09998H14.4999L14.5809 6.10876C14.7629 6.14627 14.9003 6.30726 14.9003 6.50037C14.9001 6.69332 14.7628 6.85451 14.5809 6.89197L14.4999 6.90076H13.9003V7.50037C13.9 7.7211 13.7206 7.90076 13.4999 7.90076C13.2791 7.90075 13.0997 7.7211 13.0995 7.50037V6.90076H12.4999C12.2791 6.90075 12.0997 6.7211 12.0995 6.50037C12.0995 6.27946 12.279 6.09998 12.4999 6.09998H13.0995V5.50037C13.0995 5.27946 13.279 5.09998 13.4999 5.09998Z" fill="currentColor"/>
        <path className="spark-mid" d="M13.4999 0.0999756C13.7208 0.0999756 13.9003 0.279452 13.9003 0.500366V1.09998H14.4999L14.5809 1.10876C14.7629 1.14627 14.9003 1.30726 14.9003 1.50037C14.9001 1.69332 14.7628 1.85451 14.5809 1.89197L14.4999 1.90076H13.9003V2.50037C13.9 2.7211 13.7206 2.90076 13.4999 2.90076C13.2791 2.90075 13.0997 2.7211 13.0995 2.50037V1.90076H12.4999C12.2791 1.90075 12.0997 1.7211 12.0995 1.50037C12.0995 1.27946 12.279 1.09998 12.4999 1.09998H13.0995V0.500366C13.0995 0.279457 13.279 0.0999839 13.4999 0.0999756Z" fill="currentColor"/>
        <path className="spark-far" d="M8.49986 0.0999756C8.72078 0.0999756 8.90026 0.279452 8.90026 0.500366V1.09998H9.49986L9.58092 1.10876C9.76292 1.14627 9.90026 1.30726 9.90026 1.50037C9.90007 1.69332 9.76283 1.85451 9.58092 1.89197L9.49986 1.90076H8.90026V2.50037C8.90004 2.7211 8.72065 2.90076 8.49986 2.90076C8.27909 2.90075 8.09969 2.7211 8.09947 2.50037V1.90076H7.49986C7.27909 1.90075 7.09969 1.7211 7.09947 1.50037C7.09947 1.27946 7.27896 1.09998 7.49986 1.09998H8.09947V0.500366C8.09947 0.279457 8.27896 0.0999839 8.49986 0.0999756Z" fill="currentColor"/>
      </svg>
    </>
  );
}