Drag Handle Vertical

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

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

.ai-drag-handle-vertical-icon * {
  transform-box: fill-box;
}

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

.ai-drag-handle-vertical-icon .handle {
  transform-origin: center;
}

.ai-drag-handle-vertical-icon:not(.no-hover):hover .handle {
  animation: ai-drag-handle-vertical-motion 700ms ease-in-out;
}

@keyframes ai-drag-handle-vertical-motion {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="handle" d="M10.1088 2.41855C10.1464 2.23674 10.3074 2.09921 10.5004 2.09921C10.6932 2.0994 10.8544 2.23678 10.892 2.41855L10.9008 2.4996L10.9008 12.4996C10.9008 12.7204 10.7211 12.8998 10.5004 12.9C10.2795 12.9 10.1 12.7205 10.1 12.4996L10.1 2.4996L10.1088 2.41855ZM8.10876 2.41855C8.14642 2.23674 8.30739 2.09921 8.50037 2.09921C8.69322 2.0994 8.8544 2.23678 8.89197 2.41855L8.90076 2.4996L8.90076 12.4996C8.90076 12.7204 8.7211 12.8998 8.50037 12.9C8.27945 12.9 8.09998 12.7205 8.09998 12.4996L8.09998 2.4996L8.10876 2.41855ZM6.10876 2.41855C6.14642 2.23674 6.30739 2.09921 6.50037 2.09921C6.69322 2.0994 6.8544 2.23678 6.89197 2.41855L6.90076 2.4996L6.90076 12.4996C6.90076 12.7204 6.7211 12.8998 6.50037 12.9C6.27945 12.9 6.09998 12.7205 6.09998 12.4996L6.09998 2.4996L6.10876 2.41855ZM4.10876 2.41855C4.14642 2.23674 4.30739 2.09921 4.50037 2.09921C4.69322 2.0994 4.8544 2.23678 4.89197 2.41855L4.90076 2.4996L4.90076 12.4996C4.90076 12.7204 4.7211 12.8998 4.50037 12.9C4.27945 12.9 4.09998 12.7205 4.09998 12.4996L4.09998 2.4996L4.10876 2.41855Z" fill="currentColor"/>
      </svg>
    </>
  );
}