Heading

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

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

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

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

.ai-heading-icon .heading {
  transform-origin: center;
}

.ai-heading-icon:not(.no-hover):hover .heading {
  animation: ai-heading-emphasis 700ms ease-in-out;
}

@keyframes ai-heading-emphasis {
  0%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-0.7px); }
  50% { transform: translateY(0); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="heading" d="M6.34534 2.05997C6.55018 2.10209 6.70471 2.28309 6.70471 2.5004C6.70462 2.71765 6.55015 2.89874 6.34534 2.94083L6.25452 2.95059H5.04944V7.0502H9.94983V2.95059H8.75452C8.50605 2.95059 8.30443 2.74884 8.30432 2.5004C8.30432 2.25187 8.50599 2.0502 8.75452 2.0502H12.2545L12.3453 2.05997C12.5502 2.10209 12.7047 2.28309 12.7047 2.5004C12.7046 2.71765 12.5502 2.89874 12.3453 2.94083L12.2545 2.95059H11.0494V12.0502H12.2545L12.3453 12.06C12.5502 12.1021 12.7047 12.2831 12.7047 12.5004C12.7046 12.7176 12.5502 12.8987 12.3453 12.9408L12.2545 12.9506H8.75452C8.50605 12.9506 8.30443 12.7488 8.30432 12.5004C8.30432 12.2519 8.50599 12.0502 8.75452 12.0502H9.94983V7.95059H5.04944V12.0502H6.25452L6.34534 12.06C6.55018 12.1021 6.70471 12.2831 6.70471 12.5004C6.70462 12.7176 6.55015 12.8987 6.34534 12.9408L6.25452 12.9506H2.75452C2.50605 12.9506 2.30443 12.7488 2.30432 12.5004C2.30432 12.2519 2.50599 12.0502 2.75452 12.0502H3.94983V2.95059H2.75452C2.50605 2.95059 2.30443 2.74884 2.30432 2.5004C2.30432 2.25187 2.50599 2.0502 2.75452 2.0502H6.25452L6.34534 2.05997Z" fill="currentColor"/>
      </svg>
    </>
  );
}