Underline

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

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

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

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

.ai-underline-icon .bar {
  transform-origin: center;
}

.ai-underline-icon:not(.no-hover):hover .bar {
  animation: ai-underline-pulse 700ms ease-in-out;
}

@keyframes ai-underline-pulse {
  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="bar" d="M11.5814 13.1084C11.7633 13.146 11.9007 13.307 11.9008 13.5C11.9008 13.693 11.7633 13.854 11.5814 13.8916L11.5004 13.9004H3.50037C3.27945 13.9004 3.09998 13.7209 3.09998 13.5C3.10001 13.2791 3.27947 13.0996 3.50037 13.0996H11.5004L11.5814 13.1084Z" fill="currentColor"/>
        <path className="letter" d="M10.5004 2.25C10.7763 2.25019 11.0004 2.47398 11.0004 2.75V8.0498C11.0004 9.98268 9.4332 11.5496 7.50037 11.5498C5.56737 11.5498 4.00037 9.9828 4.00037 8.0498V2.75C4.00037 2.47386 4.22422 2.25 4.50037 2.25C4.77635 2.25019 5.00037 2.47398 5.00037 2.75V8.0498C5.00037 9.43052 6.11965 10.5498 7.50037 10.5498C8.88092 10.5496 10.0004 9.4304 10.0004 8.0498V2.75C10.0004 2.47386 10.2242 2.25 10.5004 2.25Z" fill="currentColor"/>
      </svg>
    </>
  );
}