← Back

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

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

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

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

.ai-link-none-1-icon .left,
.ai-link-none-1-icon .right {
  transform-origin: center;
}

.ai-link-none-1-icon:not(.no-hover):hover .left {
  animation: ai-link-none-1-pull-left 700ms ease-in-out;
}

.ai-link-none-1-icon:not(.no-hover):hover .right {
  animation: ai-link-none-1-pull-right 700ms ease-in-out;
}

@keyframes ai-link-none-1-pull-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1px); }
}

@keyframes ai-link-none-1-pull-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="left" d="M5.49995 3.99989C5.77609 3.99989 5.99995 4.22376 5.99995 4.49989C5.99995 4.77604 5.77609 4.99989 5.49995 4.99989H4.62495C4.17218 4.99989 3.92858 5.00111 3.75777 5.01649L3.6064 5.037C2.85348 5.18078 2.26938 5.71587 2.07222 6.3954L2.03804 6.5331C2.00302 6.7021 1.99995 6.91741 1.99995 7.49989C1.99995 8.08237 2.00302 8.29769 2.03804 8.46669L2.07222 8.60439C2.26938 9.28392 2.85348 9.819 3.6064 9.96278L3.75777 9.98329C3.92858 9.99868 4.17218 9.99989 4.62495 9.99989H5.49995C5.77609 9.99989 5.99995 10.2238 5.99995 10.4999C5.99995 10.776 5.77609 10.9999 5.49995 10.9999H4.62495C4.20677 10.9999 3.90592 11.0009 3.65523 10.9774L3.4189 10.9452C2.31232 10.7339 1.41679 9.93803 1.11128 8.88368L1.05855 8.66982C0.997494 8.37515 0.999953 8.03256 0.999953 7.49989C0.999953 6.96722 0.997491 6.62464 1.05855 6.32997L1.11128 6.1161C1.41679 5.06176 2.31232 4.26589 3.4189 4.05458L3.65523 4.02235C3.90592 3.99886 4.20677 3.99989 4.62495 3.99989H5.49995Z" fill="currentColor"/>
        <path className="right" d="M10.375 3.99989C10.9324 3.99989 11.2814 3.99745 11.581 4.05458L11.7998 4.10439C12.8764 4.39206 13.716 5.24272 13.9414 6.32997L13.9765 6.56239C14.0015 6.80795 14 7.1004 14 7.49989C14 7.89939 14.0015 8.19184 13.9765 8.43739L13.9414 8.66982C13.716 9.75708 12.8764 10.6077 11.7998 10.8954L11.581 10.9452C11.2814 11.0023 10.9324 10.9999 10.375 10.9999H9.49995C9.22382 10.9999 8.99995 10.776 8.99995 10.4999C8.99996 10.2238 9.22382 9.9999 9.49995 9.99989H10.375C10.9784 9.99989 11.2103 9.99771 11.3935 9.96278L11.5419 9.9286C12.2715 9.73383 12.8172 9.16447 12.9619 8.46669L12.9834 8.32607C12.9988 8.16692 13 7.93658 13 7.49989C13 7.0632 12.9988 6.83286 12.9834 6.67372L12.9619 6.5331C12.8172 5.83533 12.2715 5.26596 11.5419 5.07118L11.3935 5.037C11.2103 5.00208 10.9784 4.99989 10.375 4.99989H9.49995C9.22382 4.99988 8.99995 4.77603 8.99995 4.49989C8.99996 4.22376 9.22382 3.9999 9.49995 3.99989H10.375Z" fill="currentColor"/>
      </svg>
    </>
  );
}