Cursor Text

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

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

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

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

.ai-cursor-text-icon .beam { transform-origin: center; }

.ai-cursor-text-icon:not(.no-hover):hover .beam {
  animation: ai-cursor-text-step 700ms ease-in-out;
}

@keyframes ai-cursor-text-step {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="beam" d="M10.5 1C10.7761 1 11 1.22386 11 1.5C11 1.77614 10.7761 2 10.5 2C9.5779 2 8.95996 2.23026 8.5791 2.56348C8.20699 2.88907 8 3.36626 8 4V7H9.25C9.52614 7 9.75 7.22386 9.75 7.5C9.75 7.77614 9.52614 8 9.25 8H8V11C8 11.6337 8.20699 12.1109 8.5791 12.4365C8.95996 12.7697 9.5779 13 10.5 13C10.7761 13 11 13.2239 11 13.5C11 13.7761 10.7761 14 10.5 14C9.42215 14 8.54005 13.7302 7.9209 13.1885C7.75828 13.0462 7.6184 12.8888 7.5 12.7188C7.3816 12.8888 7.24172 13.0462 7.0791 13.1885C6.45995 13.7302 5.57785 14 4.5 14C4.22386 14 4 13.7761 4 13.5C4 13.2239 4.22386 13 4.5 13C5.4221 13 6.04004 12.7697 6.4209 12.4365C6.79301 12.1109 7 11.6337 7 11V8H5.75C5.47386 8 5.25 7.77614 5.25 7.5C5.25 7.22386 5.47386 7 5.75 7H7V4C7 3.36626 6.79301 2.88907 6.4209 2.56348C6.04004 2.23026 5.4221 2 4.5 2C4.22386 2 4 1.77614 4 1.5C4 1.22386 4.22386 1 4.5 1C5.57785 1 6.45995 1.26977 7.0791 1.81152C7.24151 1.95364 7.3817 2.11048 7.5 2.28027C7.6183 2.11048 7.75849 1.95364 7.9209 1.81152C8.54005 1.26977 9.42215 1 10.5 1Z" fill="currentColor"/>
      </svg>
    </>
  );
}