morphicons快速上手3行代码让React图标丝滑变形零依赖SVG图标形变动画完整指南【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphiconsmorphicons是一个零运行时依赖的 SVG 图标形变动画库任意一个描边图标都能丝滑变形为另一个图标物理感来自内置弹簧引擎。它主打 React 图标动画场景——只需 3 行代码即可让菜单变成叉号、箭头旋转 90°全程无需手写关键帧压缩后仅约 7 KB。为什么图标变形难做morphicons 的答案多数图标切换动画只是线性插值坐标变形途中形状会收缩、剪切看起来像融化而一些方案又要求你为每对图标手工声明旋转组。morphicons 的做法不同旋转是算出来的通过 2D Procrustes 最优相似变换 极坐标插值arrow-right → arrow-down会自动得到 90° 纯旋转无需任何声明弹簧物理驱动阻尼谐振子方程积分推进三档手感预设开箱即用零依赖 极小体积核心 gzip 6.6 KB无动画库、无图标库依赖⚡性能友好规划亚毫秒完成每帧零数值分配全页面共用一个requestAnimationFrame核心设计铁律纯计算核心永不触碰 DOM——输入图标数据输出d字符串这正是它能在 React、Vue、Svelte、React Native、Canvas 上一份核心、处处复用的原因。一键安装步骤1 分钟接入项目bun add morphicons # 或 npm install / pnpm add morphicons两个关键前提前提说明ESM 项目仅支持 ESM 引入图标用数据而非组件例如 Lucide 请使用原生lucide包import { Menu, X } from lucide不要用lucide-react里的组件——MorphIcon消费的是IconNode数据或原始d字符串React / Vue / Svelte / React Native 均为可选 peer只用morphicons/react就只需 React≥18其余绑定按需引入。3 行代码实现 React 图标形变动画完整的最小示例与 README.md 一致import { MorphIcon } from morphicons/react; import { Menu, X } from lucide; // 数据不是组件 MorphIcon icon{open ? X : Menu} springsnappy /就这么多。没有包裹层、没有from/to配置、没有 key 管理——状态留在你自己的业务代码里属性一变动画自动接管。三种使用模式覆盖全部场景模式用法适用场景非受控90% 场景icon{open ? X : Menu}点击切换、状态驱动受控from{Menu} to{X} progress{drag}手势拖拽、滚动 scrubbing命令式ref.current?.morphTo(Check)连续播放序列动画set()则无动画跳转实现位于 src/react/index.tsx。此外它还是lucide-react的平替size、strokeWidth、color、className等属性直通svgSSR 时输出精确的静态 SVG水合零闪烁、零布局偏移传label即自动获得roleimgtitle的可访问性支持相关断言见 test/react/morphicon.test.tsx。弹簧物理调参3 档预设挑对手感物理引擎是一台约 25 行的阻尼谐振子ẍ k·(1−x) − c·ẋ半隐式欧拉、1/240s 子步长见 src/core/spring.ts。预设定义在 src/core/spring.ts预设刚度 k阻尼 c阻尼比 ζ手感smooth170261.00临界阻尼无过冲snappy420300.73快速、轻微回弹推荐默认bouncy300140.40俏皮、明显过冲最讨喜的细节是可中断变形途中再来一次morphTo会从当前中间形状重新规划并保留弹簧速度——疯狂连点也不会跳帧动画始终活着。零依赖的性能账单体积与帧开销CI 用 size-limit 做防回归门禁gzip 实测入口体积morphicons纯核心6.60 KBmorphicons/react8.01 KBmorphicons/vue/svelte8.04 / 7.66 KBmorphicons/elementmorph-icon8.86 KBadapters单个导出如canvasTarget低至 0.48 KB运行时开销同样克制plan(A, B)重采样 匹配 Procrustes亚毫秒完成且按引用缓存每帧只在预分配的Float64Array上写入唯一新分配是那串d字符串单例调度器驱动一个全局 rAF一百个图标同时变形也只有一个循环不止 React5 套绑定 格式适配器绑定入口备注Reactmorphicons/react上文主角Vuemorphicons/vueNuxt 开箱即用无 SFC 编译器依赖Sveltemorphicons/svelte以.svelte源码交付SvelteKit 直用React Nativemorphicons/react-native复用同一 DOM 驱动 setNativePropsshimWeb Component / Astromorphicons/element、morphicons/astro无需任何框架运行时五套绑定共享同一生命周期契约懒启动驱动、受控优先、干净重入并有镜像挂载测试逐条钉死。需要异形图标格式时走按需引入的适配器入口morphicons/adapters设计决策见 docs/adr/0001-frozen-core-contracts-adapters-entry.mdsvgToIcon把 Iconify 正文、网页上复制的svg转成IconInput带viewBox时自动重排到 24 网格canvasTarget直接画进 2D canvas——游戏 HUD、WebGL 纹理、动态 favicon 都能做maskTarget驱动 UnoCSS / Tailwind 类 CSS mask 图标DOM 里没有path也能变形跨图标库也开箱即用Lucide、Tabler、Heroiconsoutline、Iconoir 同在 24×24 网格。非 24 网格的图标集Carbon 32、Teenyicons 15…用一次fitIcon重排即可实现在 src/core/normalize.ts。新手常见 4 个坑一次说清误用组件包导入图标lucide-react导出的是组件必须换原生lucide的数据导出——这是新手踩坑第一名忘记图标只支持描边风格填充式图标Material Symbols 等无法诚实地变形解析期会直接报清晰错误SSR 水合告警不必担心。规范d以 4 位小数输出服务器与浏览器字节一致水合零 mismatch想尊重系统减弱动态效果默认reducedMotionnever图标微动效属于可接受范畴如需跟随系统设置传reducedMotionuser即可继续深入值得一读的模块路径核心数学管线src/core/parse→normalize→resample→plan→interpolate→serializeDOM 驱动与createMorphsrc/dom/index.ts弹簧预设与积分器src/core/spring.ts本地 Playground38 个真实图标、逐对显示 θ/σ/残差仓库根目录执行bun run play变更历史与版本亮点CHANGELOG.md装好依赖、贴上 3 行代码你的图标就开始活了——剩下的交给弹簧。【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphicons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考