IconSwap

#Transitions

Every transition is a pure function of one progress value, from 0 (showing from) to 1 (showing to). Toggling mid-swap reverses from exactly where it is, and rapid toggles never jump. The default is scale-blur.

direction steers slide (default up) and wipe (default right). Left and right follow the reading direction, so they swap under dir="rtl".

Chain up to ten icons in any transition, and copy the code, in Chain.

#Driving the progress

Instead of a state, pass progress: a number from 0 (showing from) to 1 (showing to), or a MotionValue, which repaints on every change without a render. The swap holds that moment of the transition, so a scrubber, a drag or the scroll can drive it. While progress is set, active and trigger are ignored, and labels name whichever icon it's nearer.

import { useScroll } from 'motion/react'
import { ArrowDownIcon, CheckIcon, IconSwap } from '@youj/icons'

const { scrollYProgress } = useScroll()

<IconSwap from={ArrowDownIcon} to={CheckIcon} transition="morph" progress={scrollYProgress} />

It's painted as given under reduced motion too: the value is yours, and the swap adds no motion of its own. If the scroll drives it, decide what reduced motion should show, for example progress={reduced ? 1 : scrollYProgress}.

#True morph

morph reshapes one icon into another, even two that share nothing, with no dependency. Each icon's strokes are flattened into contours. Strokes the two icons share hold still, and a stroke cut by a slash is carved out of the original, so a bell loses a gap exactly where the slash lands. The remaining strokes pair up by position and length and bend into place, turning rather than collapsing. Anything left over draws on or retracts from where it meets the rest of the icon.

The plan for each pair of icons is worked out once and shared by every instance.

#In a button

Drive a swap in a button from useIconState. The button carries the name and the state, so the swap stays decorative.

const mute = useIconState({ label: 'Mute' })

<button {...mute.buttonProps}>
  <IconSwap {...mute.iconProps} from={BellIcon} to={BellOffIcon} transition="morph" size={16} />
  Mute
</button>

#On hover

Leave active out and the swap follows its trigger, hover by default. Like any Youj icon, it listens to its closest button, link or data-yj-trigger parent, so a row can reveal the action it will take.

#With Lucide icons

from and to also accept Lucide icons, including for morph transitions. This optional integration needs lucide-react installed in your app. Here Eye changes to EyeOff as the lock opens.

import { Eye, EyeOff } from 'lucide-react'
import { IconSwap } from '@youj/icons'

<button type="button" aria-label="Show secret" aria-pressed={shown} onClick={() => setShown(!shown)}>
  <IconSwap from={Eye} to={EyeOff} active={shown} transition="morph" />
</button>

#On its own

A swap that stands alone and means something needs a name for each state. labels gives it role="img" and names it for the current state.

<IconSwap from={CloudIcon} to={CheckCircleIcon} active={saved} labels={['Saving', 'Saved']} transition="pop" />

Without labels the swap is aria-hidden, which is right inside a labeled button.