Link 2
Install
npm install @svg-animated-icons/reactCLI
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 link-2 --reactCode
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 Link2Icon({ disableHover, className }: Props) {
const classes = [
"ai-link-2-icon",
disableHover ? "no-hover" : "",
className ?? "",
]
.filter(Boolean)
.join(" ");
return (
<>
<style>{`
.ai-link-2-icon {
width: 1em;
height: 1em;
display: inline-block;
cursor: pointer;
overflow: visible;
}
.ai-link-2-icon * {
transform-box: fill-box;
}
.ai-link-2-icon.no-hover * {
transform: none;
opacity: 1;
animation: none;
}
.ai-link-2-icon .dash {
transform-origin: center;
}
.ai-link-2-icon:not(.no-hover):hover .dash {
animation: ai-link-2-slide 700ms ease-in-out;
}
@keyframes ai-link-2-slide {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-0.7px, 0.7px); }
75% { transform: translate(0.7px, -0.7px); }
}
`}</style>
<svg
xmlns="http://www.w3.org/2000/svg"
className={classes}
viewBox="0 0 15 15"
fill="none"
>
<path className="rings" d="M3.6893 6.37529C3.88335 6.24731 4.14742 6.26897 4.31821 6.43975C4.51323 6.63496 4.51323 6.95156 4.31821 7.14678L3.69907 7.76592C3.37878 8.08621 3.20737 8.25925 3.09751 8.39092L3.00473 8.51201C2.54529 9.18833 2.53677 10.0437 2.95395 10.679L3.03891 10.7933C3.14049 10.9167 3.30254 11.0803 3.61118 11.389C4.02302 11.8008 4.17689 11.9514 4.32114 12.0462L4.44223 12.1194C5.06223 12.4608 5.85391 12.4263 6.48813 11.9954L6.60923 11.9026C6.74094 11.7927 6.91473 11.6216 7.2352 11.3011L7.85337 10.6819C8.04855 10.4869 8.36517 10.487 8.5604 10.6819C8.7556 10.8771 8.75548 11.1937 8.5604 11.389L7.94223 12.0081C7.64648 12.3039 7.43399 12.5174 7.24008 12.678L7.04965 12.8226C6.11777 13.4555 4.9223 13.5259 3.96079 12.9964L3.77231 12.8821C3.52088 12.717 3.28054 12.4734 2.90415 12.097C2.62181 11.8146 2.41357 11.6085 2.25766 11.4173L2.11801 11.2278C1.468 10.2379 1.50252 8.94437 2.17758 7.95049L2.32212 7.76006C2.48279 7.56615 2.69629 7.35366 2.99204 7.05791L3.61118 6.43975L3.6893 6.37529ZM8.1395 2.05889C9.1042 1.50111 10.2992 1.50903 11.2274 2.11846L11.4168 2.25811C11.6081 2.41402 11.8142 2.62226 12.0965 2.90459C12.4729 3.28097 12.7166 3.52133 12.8817 3.77275L12.9959 3.96123C13.4902 4.85869 13.4619 5.96014 12.9413 6.86064L12.8221 7.0501C12.7365 7.17616 12.6315 7.3007 12.4989 7.44268L12.0077 7.94268L11.3885 8.56084C11.1932 8.75595 10.8767 8.75605 10.6815 8.56084C10.4866 8.3656 10.4865 8.04899 10.6815 7.85381L11.3006 7.23564L11.7684 6.75908C11.8753 6.64519 11.9426 6.56569 11.995 6.48857L12.076 6.35967C12.4289 5.74954 12.4376 5.02132 12.119 4.44268L12.0457 4.32158C11.951 4.17733 11.8004 4.02345 11.3885 3.61162C11.0799 3.30299 10.9163 3.14093 10.7928 3.03936L10.6786 2.95439C10.083 2.56329 9.29401 2.54612 8.64048 2.92412L8.51157 3.00518C8.43446 3.05757 8.35494 3.12484 8.24106 3.23174L7.76548 3.69951L7.14633 4.31865C6.95112 4.5137 6.63453 4.51368 6.4393 4.31865C6.24411 4.12344 6.2442 3.80689 6.4393 3.61162L7.05747 2.99248L7.55747 2.50225C7.69965 2.36939 7.82384 2.26376 7.95005 2.17803L8.1395 2.05889Z" fill="currentColor"/>
<path className="dash" d="M8.91391 5.37822C9.109 5.18318 9.42565 5.18352 9.62094 5.37822C9.81619 5.57347 9.81616 5.88999 9.62094 6.08525L6.08579 9.62041C5.89053 9.81567 5.57402 9.81567 5.37876 9.62041C5.18404 9.4251 5.18368 9.10846 5.37876 8.91338L8.91391 5.37822Z" fill="currentColor"/>
</svg>
</>
);
}