Space Between Vertically

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

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

.ai-space-between-vertically-icon * {
  transform-box: fill-box;
}

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

.ai-space-between-vertically-icon .top,
.ai-space-between-vertically-icon .bottom {
  transform-origin: center;
}

.ai-space-between-vertically-icon:not(.no-hover):hover .top {
  animation: ai-space-between-vertically-spread-top 700ms ease-in-out;
}

.ai-space-between-vertically-icon:not(.no-hover):hover .bottom {
  animation: ai-space-between-vertically-spread-bottom 700ms ease-in-out;
}

@keyframes ai-space-between-vertically-spread-top {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes ai-space-between-vertically-spread-bottom {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="bottom" d="M13.4999 14C13.776 14 13.9999 14.2239 13.9999 14.5C13.9999 14.7761 13.776 15 13.4999 15H1.49988C1.22373 15 0.999877 14.7761 0.999877 14.5C0.999877 14.2239 1.22373 14 1.49988 14H5.99987V10C5.99987 9.44776 6.44764 9.00007 6.99987 9.00001H7.99987C8.55215 9.00001 8.99987 9.44772 8.99987 10V14H13.4999Z" fill="currentColor"/>
        <path className="top" d="M13.4999 1.52588e-05C13.776 1.5452e-05 13.9999 0.223873 13.9999 0.500015C13.9999 0.776157 13.776 1.00001 13.4999 1.00001H8.99987V5.00001C8.99987 5.55229 8.55215 6.00001 7.99987 6.00001H6.99987C6.44764 5.99994 5.99987 5.55225 5.99987 5.00001V1.00001H1.49988C1.22373 1.00001 0.999877 0.776157 0.999877 0.500015C0.999877 0.223873 1.22373 1.52688e-05 1.49988 1.52588e-05H13.4999Z" fill="currentColor"/>
      </svg>
    </>
  );
}