Height

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add height --react

Code

React

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

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

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

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

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

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

@keyframes ai-height-stretch {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.2); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="arrow" d="M7.2517 1.62423C7.42639 1.50875 7.66428 1.52802 7.81811 1.68185L10.3181 4.18185L10.3757 4.25216C10.4911 4.42683 10.4719 4.66479 10.3181 4.81856C10.1643 4.97234 9.92637 4.99153 9.7517 4.87618L9.68139 4.81856L7.94995 3.08712V11.9133L9.68139 10.1818C9.85713 10.0061 10.1424 10.0061 10.3181 10.1818C10.4936 10.3576 10.4938 10.6429 10.3181 10.8186L7.81811 13.3186C7.73376 13.4029 7.61903 13.4503 7.49975 13.4504C7.38049 13.4504 7.26576 13.4028 7.18139 13.3186L4.68139 10.8186L4.62377 10.7483C4.50826 10.5736 4.52755 10.3357 4.68139 10.1818C4.83523 10.028 5.0731 10.0087 5.2478 10.1242L5.31811 10.1818L7.04955 11.9133V3.08712L5.31811 4.81856C5.14244 4.99423 4.85714 4.9941 4.68139 4.81856C4.50565 4.64283 4.50565 4.35758 4.68139 4.18185L7.18139 1.68185L7.2517 1.62423Z" fill="currentColor"/>
      </svg>
    </>
  );
}