Morphicons
아이콘 간 범용 morphing 라이브러리. stroke 기반 아이콘 데이터만 넣으면 모든 아이콘이 모든 아이콘으로 자연스럽게 변환된다. 회전은 수동 선언이 아니라 2D Procrustes 정렬과 극좌표 보간으로 수학적으로 자동 추출되며, zero runtime dependency에 gzip 7KB 수준으로 가볍다. MIT 라이선스. https://github.com/guillermolg00/morphicons morphicons.com - 라이브 플레이그라운드 📦 지원 프레임워크 React(>=18), Vue(>=3.3), Svelte(>=5 runes), React Native(>=0.71), Web Component(vanilla HTML/HTMX/Rails), Astro SSR 사용법은 간단하다. Lucide 같은 기존 아이콘 라이브러리의 데이터를 import해서 <MorphIcon>에 prop으로 넘기면 끝. 🔄 세 가지 사용 모드 Uncontrolled — prop만 바꾸면 자동 morph. 90%의 케이스는 이것으로 충분 Controlled — progress 값을 직접 제어. 스크롤이나 제스처에 연동할 때 Imperative — morphTo() / set() 메서드 호출. 아이콘 시퀀스를 만들 때 📐 핵심 수학 원리 아이콘 morph를 가능하게 하는 파이프라인은 6단계로 구성된다. 정규화 — 모든 SVG 프리미티브(Line, Quadratic, Circle, Arc 등)를 cubic Bézier로 변환 리샘플링 — 각 subpath를 호 길이 기준 N=64개 점으로 균일 샘플링. 코너 감지로 모서리 점을 앵커로 고정해서 체크마크 모서리 같은 디테일이 유지된다 대응 — 방향 탐색, 시작점 탐색, subpath 매칭을 통해 두 아이콘의 점들을 자동 대응 2D Procrustes 정렬 — 최적 회전각 θ를 닫힌형 해석해로 계산. arrow-right → arrow-down이 θ = 90°로 자동 드러난다. per-subpath 정렬이라 햄버거 아이콘이 블록 단위로 회전하지 않고 "접히는" 느낌
S
- UI



