Chevrons Up Down Icon
Animated chevrons icon that morphs between up and down directions.
- Dependencies (1)
Use cases
- Expand and collapse triggers on collapsible rows.
- Open indicator on select and combobox triggers.
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-downCredits
License and usage
- Free to use and modify in both personal and commercial projects.
- Attribution is appreciated but not required.
- Released under the MIT License.