IconMorph
Universal vector morphing for stroke-based icons with 2D Procrustes alignment and spring physics. Any icon morphs into any other smoothly.
Universal stroke-based vector icon morphing. Uses 2D Procrustes rotation detection, polar coordinate interpolation, and spring physics so rotations and path transitions emerge naturally from the geometry without declaring keyframes.
Usage
IconMorph
Loading demo...
Best Practices
- Use
TxIconMorphfor stateful action buttons (play/pause, menu/close, search/clear, check/plus). - Pair with
spring="snappy"for tactile click responses, orspring="smooth"for relaxed UI transitions. - When binding to gesture drag or swipe progress, use the controlled
from/to/:progressmode for linear scrubbing. - Stroke-based icons (such as Lucide, Tabler, Feather, Heroicons outline) work best. Filled glyphs should use standard icon crossfading.
API Reference
TxIconMorph Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | IconInput | - | Current icon in uncontrolled mode. Accepts preset names ('menu', 'close', 'check', etc.), raw SVG path d strings, IconNode tuples, or full <svg> markup. |
from | IconInput | - | Starting icon in controlled mode. |
to | IconInput | - | Target icon in controlled mode. |
progress | number | - | Progress from 0 to 1 in controlled mode. Freezes spring animation. |
spring | 'snappy' | 'smooth' | 'bouncy' | { stiffness?: number, damping?: number, mass?: number } | 'snappy' | Spring physics parameters for uncontrolled transitions. |
size | number | 24 | Icon width and height in px. |
strokeWidth | number | 2 | Stroke width in px. |
color | string | 'currentColor' | Icon stroke color. |
strokeLinecap | 'round' | 'butt' | 'square' | 'round' | SVG stroke-linecap attribute. |
strokeLinejoin | 'round' | 'miter' | 'bevel' | 'round' | SVG stroke-linejoin attribute. |
disabled | boolean | false | Disable morph animations and snap to target instantly. |
respectReducedMotion | boolean | true | Snaps immediately when prefers-reduced-motion is active. |
TxIconMorph Events
| Event | Payload | Description |
|---|---|---|
animation-start | - | A morph transition began. |
animation-complete | - | The morph transition completed and settled. |
Controlled Progress
Pass from, to, and progress to scrub or bind the morph directly to user gestures, scroll positions, or custom transitions without spring animation.
<template>
<TxIconMorph from="menu" to="close" :progress="dragProgress" :size="24" />
</template>
Technologies
- Component source:
packages/tuffex/packages/components/src/icon-morph/src/TxIconMorph.vue. - Core engine:
packages/tuffex/packages/components/src/icon-morph/src/engine/. - Export aliases:
TxIconMorph,IconMorph,TxMorphIcon,MorphIconfrom@talex-touch/tuffex/icon-morphor@talex-touch/tuffex.
查看源码
packages/tuffex/packages/components/src/icon-morph/index.ts