Clipboard Copy
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 clipboard-copy --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 ClipboardCopyIcon({ disableHover, className }: Props) {
const classes = [
"ai-clipboard-copy-icon",
disableHover ? "no-hover" : "",
className ?? "",
]
.filter(Boolean)
.join(" ");
return (
<>
<style>{`
.ai-clipboard-copy-icon {
width: 1em;
height: 1em;
display: inline-block;
cursor: pointer;
overflow: visible;
}
.ai-clipboard-copy-icon * {
transform-box: fill-box;
}
.ai-clipboard-copy-icon.no-hover * {
transform: none;
opacity: 1;
animation: none;
}
.ai-clipboard-copy-icon .copy { transform-origin: center; }
.ai-clipboard-copy-icon:not(.no-hover):hover .copy {
animation: ai-clipboard-copy-shift 700ms ease-in-out;
}
@keyframes ai-clipboard-copy-shift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-1.5px, -1.5px); }
}
`}</style>
<svg
xmlns="http://www.w3.org/2000/svg"
className={classes}
viewBox="0 0 15 15"
fill="none"
>
<path className="clipboard" d="M10.25 0C10.6642 0 11 0.335786 11 0.75V1H11.5C12.3284 1 13 1.67157 13 2.5V7H12V2.5C12 2.22386 11.7761 2 11.5 2H11V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H7V14H3.5C2.67157 14 2 13.3284 2 12.5V2.5C2 1.67157 2.67157 1 3.5 1H4V0.75C4 0.335786 4.33579 9.39539e-09 4.75 0H10.25ZM5 2H10V1H5V2Z" fill="currentColor"/>
<path className="copy" d="M8.5 14C8.77614 14 9 14.2239 9 14.5C9 14.7761 8.77614 15 8.5 15C8.22386 15 8 14.7761 8 14.5C8 14.2239 8.22386 14 8.5 14ZM10.5 14C10.7761 14 11 14.2239 11 14.5C11 14.7761 10.7761 15 10.5 15C10.2239 15 10 14.7761 10 14.5C10 14.2239 10.2239 14 10.5 14ZM12.5 14C12.7761 14 13 14.2239 13 14.5C13 14.7761 12.7761 15 12.5 15C12.2239 15 12 14.7761 12 14.5C12 14.2239 12.2239 14 12.5 14ZM14.5 14C14.7761 14 15 14.2239 15 14.5C15 14.7761 14.7761 15 14.5 15C14.2239 15 14 14.7761 14 14.5C14 14.2239 14.2239 14 14.5 14ZM8.5 12C8.77614 12 9 12.2239 9 12.5C9 12.7761 8.77614 13 8.5 13C8.22386 13 8 12.7761 8 12.5C8 12.2239 8.22386 12 8.5 12ZM14.5 12C14.7761 12 15 12.2239 15 12.5C15 12.7761 14.7761 13 14.5 13C14.2239 13 14 12.7761 14 12.5C14 12.2239 14.2239 12 14.5 12ZM8.5 10C8.77614 10 9 10.2239 9 10.5C9 10.7761 8.77614 11 8.5 11C8.22386 11 8 10.7761 8 10.5C8 10.2239 8.22386 10 8.5 10ZM14.5 10C14.7761 10 15 10.2239 15 10.5C15 10.7761 14.7761 11 14.5 11C14.2239 11 14 10.7761 14 10.5C14 10.2239 14.2239 10 14.5 10ZM8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8ZM10.5 8C10.7761 8 11 8.22386 11 8.5C11 8.77614 10.7761 9 10.5 9C10.2239 9 10 8.77614 10 8.5C10 8.22386 10.2239 8 10.5 8ZM12.5 8C12.7761 8 13 8.22386 13 8.5C13 8.77614 12.7761 9 12.5 9C12.2239 9 12 8.77614 12 8.5C12 8.22386 12.2239 8 12.5 8ZM14.5 8C14.7761 8 15 8.22386 15 8.5C15 8.77614 14.7761 9 14.5 9C14.2239 9 14 8.77614 14 8.5C14 8.22386 14.2239 8 14.5 8Z" fill="currentColor"/>
</svg>
</>
);
}