Link 1
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-1 --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 Link1Icon({ disableHover, className }: Props) {
const classes = [
"ai-link-1-icon",
disableHover ? "no-hover" : "",
className ?? "",
]
.filter(Boolean)
.join(" ");
return (
<>
<style>{`
.ai-link-1-icon {
width: 1em;
height: 1em;
display: inline-block;
cursor: pointer;
overflow: visible;
}
.ai-link-1-icon * {
transform-box: fill-box;
}
.ai-link-1-icon.no-hover * {
transform: none;
opacity: 1;
animation: none;
}
.ai-link-1-icon .dash {
transform-origin: center;
}
.ai-link-1-icon:not(.no-hover):hover .dash {
animation: ai-link-1-slide 700ms ease-in-out;
}
@keyframes ai-link-1-slide {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-1px); }
75% { transform: translateX(1px); }
}
`}</style>
<svg
xmlns="http://www.w3.org/2000/svg"
className={classes}
viewBox="0 0 15 15"
fill="none"
>
<path className="rings" d="M5.49971 4.00002C5.77585 4.00002 5.9997 4.22388 5.99971 4.50002C5.99971 4.77616 5.77585 5.00002 5.49971 5.00002H4.62471C4.17194 5.00002 3.92833 5.00123 3.75752 5.01662L3.60615 5.03712C2.85324 5.1809 2.26914 5.71599 2.07197 6.39552L2.03779 6.53322C2.00278 6.70222 1.99971 6.91753 1.99971 7.50002C1.99971 8.08249 2.00278 8.29781 2.03779 8.46681L2.07197 8.60451C2.26914 9.28404 2.85324 9.81913 3.60615 9.96291L3.75752 9.98341C3.92833 9.9988 4.17194 10 4.62471 10H5.49971C5.77585 10 5.9997 10.2239 5.99971 10.5C5.99971 10.7762 5.77585 11 5.49971 11H4.62471C4.20653 11 3.90568 11.001 3.65498 10.9776L3.41865 10.9453C2.31208 10.734 1.41654 9.93815 1.11104 8.8838L1.0583 8.66994C0.99725 8.37527 0.999709 8.03268 0.999709 7.50002C0.999708 6.96735 0.997247 6.62476 1.0583 6.33009L1.11104 6.11623C1.41654 5.06188 2.31208 4.26602 3.41865 4.0547L3.65498 4.02248C3.90568 3.99899 4.20653 4.00002 4.62471 4.00002H5.49971ZM10.3747 4.00002C10.9322 4.00002 11.2812 3.99758 11.5808 4.0547L11.7995 4.10451C12.8761 4.39219 13.7157 5.24284 13.9411 6.33009L13.9763 6.56252C14.0013 6.80807 13.9997 7.10052 13.9997 7.50002C13.9997 7.89951 14.0013 8.19196 13.9763 8.43752L13.9411 8.66994C13.7157 9.7572 12.8761 10.6078 11.7995 10.8955L11.5808 10.9453C11.2812 11.0025 10.9322 11 10.3747 11H9.49971C9.22357 11 8.99971 10.7762 8.99971 10.5C8.99971 10.2239 9.22358 10 9.49971 10H10.3747C10.9781 10 11.21 9.99783 11.3933 9.96291L11.5417 9.92873C12.2712 9.73395 12.817 9.16459 12.9616 8.46681L12.9831 8.32619C12.9986 8.16705 12.9997 7.9367 12.9997 7.50002C12.9997 7.06332 12.9986 6.83298 12.9831 6.67384L12.9616 6.53322C12.817 5.83545 12.2712 5.26608 11.5417 5.0713L11.3933 5.03712C11.21 5.0022 10.9781 5.00002 10.3747 5.00002H9.49971C9.22357 5.00001 8.99971 4.77615 8.99971 4.50002C8.99971 4.22388 9.22358 4.00002 9.49971 4.00002H10.3747Z" fill="currentColor"/>
<path className="dash" d="M10.0007 7.00002C10.2767 7.00017 10.5007 7.22397 10.5007 7.50002C10.5007 7.77606 10.2767 7.99986 10.0007 8.00002H5.00069C4.72454 8.00002 4.50068 7.77616 4.50068 7.50002C4.50068 7.22387 4.72454 7.00002 5.00069 7.00002H10.0007Z" fill="currentColor"/>
</svg>
</>
);
}