External Link

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

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

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

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

.ai-external-link-icon .arrow { transform-origin: center; }

.ai-external-link-icon:not(.no-hover):hover .arrow {
  animation: ai-external-link-motion 700ms ease-in-out;
}

@keyframes ai-external-link-motion {
  0%, 50%, 100% { transform: translate(0, 0); }
  25%, 75% { transform: translate(1.25px, -1.25px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="frame" d="M6.5 2C6.77614 2 7 2.22386 7 2.5C7 2.77614 6.77614 3 6.5 3H3V12H12V8.5C12 8.22386 12.2239 8 12.5 8C12.7761 8 13 8.22386 13 8.5V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3C2 2.44772 2.44772 2 3 2H6.5Z" fill="currentColor"/>
        <path className="arrow" d="M12.5 2C12.5327 2 12.5655 2.00242 12.5977 2.00879L12.6006 2.00977C12.6596 2.02181 12.7142 2.04529 12.7637 2.07617C12.7759 2.08379 12.7872 2.09279 12.7988 2.10156C12.8133 2.11247 12.8276 2.12336 12.8408 2.13574C12.8448 2.13951 12.8496 2.14255 12.8535 2.14648C12.8579 2.15091 12.861 2.15658 12.8652 2.16113C12.8782 2.17509 12.8901 2.18971 12.9014 2.20508C12.9096 2.21632 12.9176 2.22752 12.9248 2.23926C12.9352 2.25615 12.9438 2.27385 12.9521 2.29199C12.9559 2.30024 12.9605 2.30801 12.9639 2.31641C12.9719 2.33664 12.9781 2.35748 12.9834 2.37891C12.9859 2.38905 12.9893 2.39893 12.9912 2.40918C12.9966 2.43867 13 2.46896 13 2.5V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70703L6.85352 8.85352C6.65825 9.04878 6.34175 9.04878 6.14648 8.85352C5.95122 8.65825 5.95122 8.34175 6.14648 8.14648L11.293 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.5Z" fill="currentColor"/>
      </svg>
    </>
  );
}