Chevrons Up Down Icon

위아래 방향이 부드럽게 뒤바뀌는 셰브런 아이콘이에요.

Loading…

설치

처음이라면 components.json에 @smlee 레지스트리를 한 번만 등록하세요.

{
  "registries": {
    "@smlee": "https://smlee.info/r/{name}.json"
  }
}

그다음 컴포넌트를 추가해요.

pnpm dlx shadcn@latest add @smlee/chevrons-up-down-icon

사용법

import { useRef } from "react"
 
import {
  ChevronsUpDownIcon,
  ChevronsUpDownIconHandle,
} from "@/components/chevrons-up-down-icon"

const chevronsUpDownIconRef = useRef<ChevronsUpDownIconHandle>(null)

<ChevronsUpDownIcon ref={chevronsUpDownIconRef} />

ref를 통해 원하는 시점에 모프 애니메이션을 직접 실행할 수 있어요.

chevronsUpDownIconRef.current?.startAnimation() // chevrons-down-up 방향으로 전환
chevronsUpDownIconRef.current?.stopAnimation() // chevrons-up-down 방향으로 복귀

크레딧

Lucide