Space Between Horizontally

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

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

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

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

.ai-space-between-horizontally-icon .left,
.ai-space-between-horizontally-icon .right {
  transform-origin: center;
}

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

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

@keyframes ai-space-between-horizontally-spread-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1px); }
}

@keyframes ai-space-between-horizontally-spread-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="left" d="M5.99995 7.99993C5.99995 8.55221 5.55224 8.99993 4.99996 8.99993L0.999992 8.99993L0.999991 13.4999C0.999991 13.776 0.776135 13.9999 0.499995 13.9999C0.223855 13.9999 -5.58458e-07 13.776 -5.46388e-07 13.4999L-2.18555e-08 1.49999C1.89755e-06 1.22385 0.223857 0.999991 0.499996 0.999991C0.776135 0.999991 0.99999 1.22385 0.999992 1.49999L0.999992 5.99995L4.99996 5.99995C5.55224 5.99995 5.99995 6.44766 5.99995 6.99994L5.99995 7.99993Z" fill="currentColor"/>
        <path className="right" d="M9.99992 8.99993C9.44764 8.99993 8.99993 8.55221 8.99993 7.99993L8.99993 6.99994C8.99993 6.44766 9.44764 5.99995 9.99992 5.99995L13.9999 5.99995L13.9999 1.49999C13.9999 1.22385 14.2237 0.999992 14.4999 0.999992C14.776 0.999992 14.9999 1.22385 14.9999 1.49999L14.9999 13.4999C14.9999 13.776 14.776 13.9999 14.4999 13.9999C14.2237 13.9999 13.9999 13.776 13.9999 13.4999L13.9999 8.99993L9.99992 8.99993Z" fill="currentColor"/>
      </svg>
    </>
  );
}