← Back

Link Break 1

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
FlagDescription
--dest <dir>Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI
npx @svg-animated-icons/cli add link-break-1 --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 LinkBreak1Icon({ disableHover, className }: Props) {
  const classes = [
    "ai-link-break-1-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

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

.ai-link-break-1-icon * {
  transform-box: fill-box;
}

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

.ai-link-break-1-icon .dash {
  transform-origin: center;
  clip-path: inset(0);
}

.ai-link-break-1-icon:not(.no-hover):hover .dash {
  animation: ai-link-break-1-cross 700ms ease-in-out;
}

@keyframes ai-link-break-1-cross {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="rings" d="M12.4196 4.34657C13.1898 4.74705 13.7613 5.46253 13.9411 6.32996L13.9763 6.56239C14.0013 6.80794 13.9997 7.1004 13.9997 7.49989C13.9997 7.89937 14.0013 8.19183 13.9763 8.43739L13.9411 8.66981C13.7157 9.75707 12.8761 10.6077 11.7995 10.8954L11.5808 10.9452C11.2812 11.0023 10.9321 10.9999 10.3747 10.9999H9.49971C9.22359 10.9999 8.99971 10.776 8.99971 10.4999C8.99973 10.2238 9.2236 9.99991 9.49971 9.99989H10.3747C10.9781 9.99989 11.21 9.9977 11.3933 9.96278L11.5417 9.9286C12.2712 9.73382 12.817 9.16446 12.9616 8.46668L12.9831 8.32606C12.9986 8.16692 12.9997 7.93656 12.9997 7.49989C12.9997 7.06321 12.9986 6.83285 12.9831 6.67371L12.9616 6.53309C12.8249 5.87352 12.3298 5.3285 11.6599 5.10633L12.4196 4.34657ZM5.49971 3.99989C5.77584 3.99989 5.99969 4.22376 5.99971 4.49989C5.99971 4.77603 5.77585 4.99989 5.49971 4.99989H4.62471C4.17195 4.99989 3.92833 5.0011 3.75752 5.01649L3.60615 5.037C2.85325 5.18078 2.26914 5.71587 2.07197 6.39539L2.03779 6.53309C2.00278 6.70209 1.99971 6.91741 1.99971 7.49989C1.99971 8.08233 2.00278 8.29768 2.03779 8.46668L2.07197 8.60438C2.24501 9.20077 2.71593 9.68645 3.3376 9.89344L2.57881 10.6522C1.87335 10.2851 1.33427 9.6541 1.11104 8.88368L1.0583 8.66981C0.997255 8.37515 0.999709 8.03254 0.999709 7.49989C0.999708 6.96723 0.997248 6.62463 1.0583 6.32996L1.11104 6.1161C1.41654 5.06176 2.31209 4.26589 3.41865 4.05457L3.65498 4.02235C3.90567 3.99886 4.20654 3.99989 4.62471 3.99989H5.49971Z" fill="currentColor"/>
        <path className="dash" d="M12.6462 1.64637C12.8414 1.45116 13.1579 1.45126 13.3532 1.64637C13.5485 1.84163 13.5485 2.15814 13.3532 2.3534L2.35322 13.3534C2.15795 13.5485 1.8414 13.5486 1.64619 13.3534C1.45113 13.1582 1.45113 12.8416 1.64619 12.6464L12.6462 1.64637Z" fill="currentColor"/>
      </svg>
    </>
  );
}