一个组件搞定6大框架morphicons在React、Vue、Svelte、React Native、Astro与Web Component中的统一玩法【免费下载链接】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 是一个零运行时依赖、gzip 后仅约 7 KB 的图标变形icon morphing动画库任意图标都能带弹簧物理地平滑变形为任意其他图标。本文带你用同一套心智模型一次性掌握它在 React、Vue、Svelte、React Native、Astro 与 Web Component 六大框架中的统一玩法。为什么图标变形动画很难做对传统的图标 morph 动画要么直接插值坐标——形状在飞行途中会缩小、剪切要么要求你为每一对图标手写旋转分组。morphicons 的做法是让数学自己说话用2D Procrustes闭式解算出两个形状之间的最优相似变换旋转 θ、缩放 σ、平移在极坐标空间做插值如果两个图标只是旋转关系比如 arrow-right → arrow-down它会自动执行纯旋转 90°全程不变形配合阻尼弹簧smooth / snappy / bouncy 三档预设飞行中的图标随时可被打断连点也不会跳变旋转分组从来不需要你手写——它是数学的涌现结果。核心公式与流程细节可以阅读 src/core/ 下的源码架构决策记录见 docs/adr/0001-frozen-core-contracts-adapters-entry.md。安装步骤一条命令按需加载npm install morphicons lucide 关键认知图标数据来自lucide数据包data, not components。import { Menu, X } from lucide拿到的是IconNode数据而不是lucide-react里的组件。如果你项目里已经在用 lucide-react 渲染静态图标可以保留它——数据包与组件包按设计共存且都能 tree-shake只需保持版本一致。morphicons 通过子路径导出支持六大框架只导入你用的那一份即可sideEffects: false入口定义见 package.json入口适用场景gzip 体积morphicons/reactReact 188.01 KBmorphicons/vueVue 3.3 / Nuxt8.04 KBmorphicons/svelteSvelte 57.66 KB 1.26 KB 组件源码morphicons/react-nativeRN 0.71 react-native-svg8.37 KBmorphicons/astroAstroSSR 外壳零框架运行时1.58 KB 源码morphicons/elementmorph-icon自定义元素任何 HTML8.86 KB统一心智模型3 种控制模式6 个框架通用 这是全文最值钱的表格——学完任意一个框架其余五个都会写模式用法适用场景非受控90% 场景传iconprop 一变就自动播放弹簧动画菜单 ↔ 关闭、加载态切换受控传fromtoprogress0..1无弹簧拖拽手势、滚动驱动命令式通过 ref / 句柄调用morphTo()动画或set()跳变序列动画、编程式控制六大绑定共享同一套属性面size、strokeWidth、color、spring、label无障碍、reducedMotion动效偏好全部收敛在一个共享控制器里见 src/dom/controller.ts。React 图标变形组件三行代码搞定菜单按钮import { MorphIcon } from morphicons/react; import { Menu, X } from lucide; // 数据不是组件 button onClick{() setOpen(o !o)} MorphIcon icon{open ? X : Menu} springsnappy / /button就是全部。没有 wrapper、没有 AnimatePresence、没有 key 对、没有 from/to 配置——状态在外层动画只是 prop 变化时组件自动拾取到的实现细节。亮点SSR 干净服务端输出精确的静态 SVG零闪烁、零布局偏移运行时在水合后才诞生无障碍默认正确不传label时自动aria-hidden传了则roleimgtitlelucide-react 平替size、strokeWidth、color、className及所有svg属性直接透传实现见 src/react/index.tsx挂载行为由镜像测试套件锁定见 test/react/mount.test.tsx。Vue 图标变形动画Nuxt 开箱即用script setup langts import { ref } from vue; import { MorphIcon } from morphicons/vue; import { Menu, X } from lucide; const open ref(false); /script template MorphIcon :iconopen ? X : Menu springsnappy / /template与 React 绑定完全相同的三种模式、相同的无障碍默认值、同样的 SSR 干净特性——Nuxt 直接可用。绑定是纯 render function不涉及 SFC 编译器或 JSX构建零额外依赖。源码见 src/vue/index.ts。Svelte 5 runes 时代的极简集成script langts import { MorphIcon } from morphicons/svelte; import { Menu, X } from lucide; let open $state(false); /script MorphIcon icon{open ? X : Menu} springsnappy /组件以.svelte源码形式发布由你的打包器通过svelte导出条件编译1.26 KB gzip类型经svelte/elements完整覆盖——SVG 属性、事件、ARIA 全部自动补全写错编译即报错体验对齐 lucide-svelte。SvelteKit 开箱即用。源码src/svelte/MorphIcon.svelte。React Native 图标变形跨平台零重写import { MorphIcon } from morphicons/react-native; import { Menu, X } from lucide; MorphIcon icon{open ? X : Menu} springsnappy /浏览器之外的 DOM-free 核心在这里体现得最充分dom 驱动被原样复用为引擎整个平台差异只是一个把每帧d写入转发给react-native-svg的Path.setNativeProps的 shim——在 React render 之外执行与 web 突变模式一致。New Architecture 下还处理了 Fabric 提交重建原生路径的时序问题。源码src/react-native/index.tsx。⚠️ 需要 Metro 的 packageexports解析——React Native 0.79 起默认开启旧版本请启用unstable_enablePackageExports。Astro 图标组件零框架运行时的 SSR 形态--- import MorphIcon from morphicons/astro; import { Menu } from lucide; --- MorphIcon icon{Menu} labelMenu idmenu-icon /这是最有意思的绑定hydration 就是一次自定义元素升级。服务端用纯核心输出精确静态 SVG静态输出和任意 SSR 适配器都工作页面加载后morph-icon元素原样接管服务端标记——升级期间零d写入由插桩测试钉死。客户端字节只有morphicons/element一份不发布任何框架运行时。适合那些根本不需要 Island 的页面岛内的图标仍可用 React/Vue/Svelte 绑定。源码src/astro/MorphIcon.astro。Web Componentmorph-icon出现在任何 HTMLscript typemodule import { defineMorphIcon } from morphicons/element; defineMorphIcon(); // 幂等自定义标签defineMorphIcon(my-icon) /script morph-icon iconM4 6h16M4 12h16M4 18h16 labelMenu/morph-iconmorphicons/element就是第五个绑定而不是第二套实现——它把属性与属性方法接到同一个共享控制器暴露同样的三种模式元素本身就是句柄el.morphTo(X)/el.icon X/el.progress 0.5。纯 HTML、HTMX、Rails 或任何服务端渲染栈都能用。源码src/element/index.ts。无障碍动效reducedMotion 三档策略六个绑定统一支持reducedMotion属性且实时生效改变它管的是下一次 morphnever默认始终动画——图标 morph 属于简短、有沟通性的微过渡自动降级反而让库看起来像坏了user尊重系统减弱动态效果设置开启时降级为即时切换web 读prefers-reduced-motionRN 读AccessibilityInfoalways全部跳变适合测试与截图必须严格跟随用户系统偏好的应用全局传reducedMotionuser即可。本地体验跑起来 playground仓库自带可视化 playground38 个真实图标Lucide / Feather / Tabler、每对图标的相似度读数θ、σ、残差、弹簧预设与 t 滑杆见 playground/git clone https://gitcode.com/gh_mirrors/mo/morphicons cd morphicons bun install bun run play # → http://localhost:3000架构速览一个包为什么能喂饱 6 个框架┌─────────────────────────────────────────────┐ │ bindings react · vue · svelte · rn │ 薄层ref createMorph │ · element ( astro SSR shell) │ ├─────────────────────────────────────────────┤ │ drivers dom (setAttribute rAF) │ 单例调度器 ├─────────────────────────────────────────────┤ │ core parse → resample → align → plan │ 纯函数不碰 DOM │ → interpolate → serialize spring│ └─────────────────────────────────────────────┘铁律只有一条core 永不触碰 DOM。纯函数消费图标数据、产出d字符串——正因如此React Native 绑定只是又一个适配器而非重写六个框架绑定都只是共享驱动上的一层薄壳。这就是一个组件搞定 6 大框架的底层原因。常见问题 FAQ ❓只支持 Lucide 吗不。任何满足三条件的线性stroke图标集都能用几何以描边中线形式存在、几何可取为d字符串或节点列表、一对图标共享同一坐标网格。Tabler、Heroiconsoutline、Iconoir 都在 24×24 网格上开箱即用其他网格Carbon 32、Teenyicons 15用fitIcon重排一次即可。会破坏我现有的 lucide-react / lucide-vue-next 吗不会。静态图标继续用组件包morph 用数据包两者按设计共存。体积有多大core 6.60 KB gzip单个框架绑定约 8 KBmorph-icon元素 8.86 KB——对比动辄几十 KB 的动画库这是只买你需要的按需导出。写在最后morphicons 的设计哲学值得学习把复杂留在 core纯函数 数学把简单留给框架薄绑定 统一契约。无论你今天用 React 还是明天迁移到 SvelteMorphIcon icon{...} /这一行代码都不用改——图标变形动画终于做到了一次理解处处复用。【免费下载链接】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），仅供参考