Line Height

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

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

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

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

.ai-line-height-icon .arrow {
  transform-box: view-box;
  transform-origin: 3.5px 7.5px;
}

.ai-line-height-icon:not(.no-hover):hover .arrow {
  animation: ai-line-height-stretch 700ms ease-in-out;
}

@keyframes ai-line-height-stretch {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="arrow" d="M3.49984 2.09999C3.6058 2.10009 3.70812 2.14225 3.78305 2.21718L5.78305 4.21718L5.83383 4.28065C5.93587 4.43586 5.91954 4.64709 5.78305 4.78358C5.64655 4.92007 5.43531 4.93641 5.28012 4.83437L5.21664 4.78358L3.90023 3.46718V11.5336L5.21664 10.2172C5.37285 10.061 5.62684 10.061 5.78305 10.2172C5.93888 10.3734 5.93913 10.6275 5.78305 10.7836L3.78305 12.7836C3.70812 12.8585 3.60579 12.9007 3.49984 12.9008C3.39393 12.9008 3.29162 12.8584 3.21664 12.7836L1.21664 10.7836L1.16586 10.7201C1.0635 10.5649 1.08002 10.3538 1.21664 10.2172C1.35326 10.0806 1.56433 10.064 1.71957 10.1664L1.78305 10.2172L3.09945 11.5336V3.46718L1.78305 4.78358C1.62696 4.93966 1.37288 4.93941 1.21664 4.78358C1.06043 4.62738 1.06044 4.37339 1.21664 4.21718L3.21664 2.21718L3.27816 2.16737C3.34333 2.12402 3.42042 2.09999 3.49984 2.09999Z" fill="currentColor"/>
        <path className="lines" d="M14.4998 10.0004C14.776 10.0004 14.9998 10.2242 14.9998 10.5004C14.9996 10.7763 14.7759 11.0004 14.4998 11.0004H8.49984C8.22389 11.0003 8.00006 10.7763 7.99984 10.5004C7.99984 10.2243 8.22376 10.0004 8.49984 10.0004H14.4998ZM14.4998 7.00038C14.776 7.00038 14.9998 7.22424 14.9998 7.50038C14.9996 7.77634 14.7759 8.00038 14.4998 8.00038H8.49984C8.22389 8.00032 8.00006 7.7763 7.99984 7.50038C7.99984 7.22428 8.22376 7.00045 8.49984 7.00038H14.4998ZM14.4998 4.00038C14.776 4.00038 14.9998 4.22424 14.9998 4.50038C14.9996 4.77634 14.7759 5.00038 14.4998 5.00038H8.49984C8.22389 5.00032 8.00006 4.7763 7.99984 4.50038C7.99984 4.22428 8.22376 4.00045 8.49984 4.00038H14.4998Z" fill="currentColor"/>
      </svg>
    </>
  );
}