Chevrons Up Down Icon – Chánh Đại

Animated chevrons icon that morphs between up and down directions.

Loading…

Installation

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

Usage

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

const chevronsUpDownIconRef = useRef<ChevronsUpDownIconHandle>(null)

<ChevronsUpDownIcon ref={chevronsUpDownIconRef} />

Trigger the morph imperatively through the ref:

chevronsUpDownIconRef.current?.startAnimation() // morph to chevrons-down-up
chevronsUpDownIconRef.current?.stopAnimation() // morph back to chevrons-up-down

References

Chevrons Up Down by Lucide — source icon for the resting state
Chevrons Down Up by Lucide — source icon for the animated state