Padding

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

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

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

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

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

.ai-padding-icon:not(.no-hover):hover .dots {
  animation: ai-padding-condense 700ms ease-in-out;
}

@keyframes ai-padding-condense {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.85); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="frame" d="M12.333 1.00977C13.2693 1.105 14 1.89595 14 2.85742V12.1426L13.9902 12.333C13.9014 13.2068 13.2068 13.9014 12.333 13.9902L12.1426 14H2.85742L2.66699 13.9902C1.79318 13.9014 1.09864 13.2068 1.00977 12.333L1 12.1426V2.85742C1 1.89595 1.73065 1.105 2.66699 1.00977L2.85742 1H12.1426L12.333 1.00977ZM2.85742 2C2.38403 2 2 2.38404 2 2.85742V12.1426C2 12.616 2.38404 13 2.85742 13H12.1426C12.616 13 13 12.616 13 12.1426V2.85742C13 2.38403 12.616 2 12.1426 2H2.85742Z" fill="currentColor"/>
        <path className="dots" d="M4.5 10C4.77605 10.0001 4.99993 10.224 5 10.5C5 10.7761 4.77609 10.9999 4.5 11C4.22386 11 4 10.7761 4 10.5C4.00007 10.2239 4.2239 10 4.5 10ZM7.5 10C7.77605 10.0001 7.99993 10.224 8 10.5C8 10.7761 7.77609 10.9999 7.5 11C7.22386 11 7 10.7761 7 10.5C7.00007 10.2239 7.2239 10 7.5 10ZM10.5 10C10.776 10.0001 10.9999 10.224 11 10.5C11 10.7761 10.7761 10.9999 10.5 11C10.2239 11 10 10.7761 10 10.5C10.0001 10.2239 10.2239 10 10.5 10ZM4.5 7C4.77605 7.00007 4.99993 7.22395 5 7.5C5 7.7761 4.77609 7.99993 4.5 8C4.22386 8 4 7.77614 4 7.5C4.00007 7.22391 4.2239 7 4.5 7ZM10.5 7C10.776 7.00007 10.9999 7.22395 11 7.5C11 7.7761 10.7761 7.99993 10.5 8C10.2239 8 10 7.77614 10 7.5C10.0001 7.22391 10.2239 7 10.5 7ZM4.5 4C4.77605 4.00007 4.99993 4.22395 5 4.5C5 4.7761 4.77609 4.99993 4.5 5C4.22386 5 4 4.77614 4 4.5C4.00007 4.22391 4.2239 4 4.5 4ZM7.5 4C7.77605 4.00007 7.99993 4.22395 8 4.5C8 4.7761 7.77609 4.99993 7.5 5C7.22386 5 7 4.77614 7 4.5C7.00007 4.22391 7.2239 4 7.5 4ZM10.5 4C10.776 4.00007 10.9999 4.22395 11 4.5C11 4.7761 10.7761 4.99993 10.5 5C10.2239 5 10 4.77614 10 4.5C10.0001 4.22391 10.2239 4 10.5 4Z" fill="currentColor"/>
      </svg>
    </>
  );
}