Copy Icon

New

Two sheets that slide apart on hover and fold into a check once copied.

motion@soultel/use-reduced-motion-safe@soultel/use-icon-trigger

hover me

npm i soultel

Installation

$ pnpm dlx shadcn@latest add @soultel/icon-copy

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/icon-copy.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/icon-copy.tsx.

Usage

example.tsx18 lines

import { useState } from "react"
import { CopyIcon } from "@/components/icon-copy"

export function CopyCommand({ text }: { text: string }) {
  const [copied, setCopied] = useState(false)

  const copy = async () => {
    await navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }

  return (
    <button onClick={copy} aria-label={copied ? "Copied" : "Copy"}>
      <CopyIcon size={16} checked={copied} />
    </button>
  )
}

Props

Prop	Type	Default	Description
checked	boolean	false	Shows the check instead of the sheets.
size	number	24	Width and height in px.
strokeWidth	number	2	Stroke width on the 24 by 24 grid.
animate	"hover" \| "always" \| boolean	"hover"	"hover" plays when the nearest button or link (or the icon) is hovered, focused or tapped. "always" loops. A boolean plays each time it turns true, so a parent can drive it.
label	string	-	Accessible name. Without one the icon is aria-hidden.
className	string	-	Classes for the svg. Color comes from currentColor.