Enter Full Screen

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

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

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

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

.ai-enter-full-screen-icon .corners {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-enter-full-screen-icon:not(.no-hover):hover .corners {
  animation: ai-enter-full-screen-motion 700ms ease-in-out;
}

@keyframes ai-enter-full-screen-motion {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="corners" d="M2.5 9C2.77614 9 3 9.22386 3 9.5V12H5.5C5.77614 12 6 12.2239 6 12.5C6 12.7761 5.77614 13 5.5 13H2.5C2.22386 13 2 12.7761 2 12.5V9.5C2 9.22386 2.22386 9 2.5 9ZM12.5 9C12.7761 9 13 9.22386 13 9.5V12.5C13 12.7761 12.7761 13 12.5 13H9.5C9.22386 13 9 12.7761 9 12.5C9 12.2239 9.22386 12 9.5 12H12V9.5C12 9.22386 12.2239 9 12.5 9ZM5.5 2C5.77614 2 6 2.22386 6 2.5C6 2.77614 5.77614 3 5.5 3H3V5.5C3 5.77614 2.77614 6 2.5 6C2.22386 6 2 5.77614 2 5.5V2.5L2.00977 2.39941C2.05629 2.17145 2.25829 2 2.5 2H5.5ZM12.6006 2.00977C12.8286 2.05629 13 2.25829 13 2.5V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.5L12.6006 2.00977Z" fill="currentColor"/>
      </svg>
    </>
  );
}