morphicons/adapters完全指南：svgToIcon、maskTarget、canvasTarget三大格式适配器让任意图标表示都能动

morphicons/adapters完全指南svgToIcon、maskTarget、canvasTarget三大格式适配器让任意图标表示都能动【免费下载链接】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 是一个零依赖、约 7 KB gzip 的图标变形icon morphing库让任意 stroke 图标平滑变形成任意其他图标。但图标在真实项目中往往不止一种长相有的是 SVG 标记字符串有的是 CSS mask 元素有的要画进 Canvas 像素里。morphicons/adapters入口正是为此而生——它提供svgToIcon、maskTarget、canvasTarget 三大格式适配器把任意图标表示统一接入变形流水线。本文带你快速搞懂这三个适配器分别解决什么问题、原理是什么、该怎么选。为什么需要格式适配器先理解一个设计前提morphicons 核心只认识两个结构性契约——方向契约说明输入IconInputLucide 风格的IconNode或原始d字符串输出PathEl任何带setAttribute的对象通常是path只要外来格式被转换成这两个契约之一整套变形流水线重采样、Procrustes 对齐、极坐标插值、弹簧物理就能原样工作。适配器就是那座桥。这个决策被记录在 docs/adr/0001-frozen-core-contracts-adapters-entry.md所有外来格式统一放在一个可选入口morphicons/adapters中核心、驱动和各框架绑定永不为你没用到的能力增加体积。入口内部每个适配器都是独立模块按需具名导入即可被 tree-shake 到只剩你用的那一个且 CI 里有逐导出的体积门size-limit防止两个适配器意外耦合。总览见 src/adapters/index.ts。一句话总结理念按格式适配从不按图标库适配——没有也不会出现/iconify这样的入口付费单位是 import。1️⃣ svgToIconSVG 标记一步变成图标数据适用场景你的图标以标记而非数据存在——比如iconify-json/*里的 Iconify bodyUnoCSSpresetIcons、Tailwind 图标插件消费的格式、从网站上复制的完整svg…/svg、shadcn registry 里的path。import { svgToIcon } from morphicons/adapters; const MENU svgToIcon(menuBody); // 模块作用域解析一次引用可复用 const X svgToIcon(xBody); // 之后可传入 createMorph 或任何框架绑定一次调用四件事自动完成实现见 src/adapters/svg.ts剥离不可渲染容器defs、mask、clipPath、symbol连同子节点直接丢弃不会污染几何️可变形性扫描morphicons 只变形 stroke 中心线。填充绘制Material Symbols 风格、带transform的元素、七种 stroke 基元path/line/circle/ellipse/rect/polyline/polygon之外的元素都会在解析时就抛出清晰错误而不是渲染中途才炸viewBox 自动归格标记带viewBox时几何会被自动重排到 24×24 共享网格非 24 栅格的图标集开箱即用返回IconInput之后createMorph、MorphIcon icon{…}/等任何入口都能接受它。⚠️最佳实践在模块作用域调用svgToIcon并复用返回的引用而不是每次渲染重新解析——核心按引用缓存解析与计划WeakMap引用稳定缓存才一直命中。2️⃣ maskTarget让 CSS mask 图标原地动起来适用场景你的图标走 CSS mask 渲染——UnoCSSpresetIcons、iconify/tailwind、egoist/tailwindcss-icons渲染出的i-lucide-*、icon-[lucide-x]类。这类元素是span/divmask-imagedata URIDOM 里根本没有path可写普通驱动无从下手。maskTarget在元素上建一个隐藏的内联svg内含一对maskpath双缓冲把元素的mask-image指向它们再交给驱动一个PathEl——之后每帧的d写入都落在真实 SVG 几何上元素带着你的size-*/text-*类原地变形import { maskTarget } from morphicons/adapters; import { createMorph } from morphicons/dom; const target maskTarget(spanEl); // spanEl: classsize-5 const m createMorph(target, MENU); m.morphTo(X, snappy); // 完整 Morph 句柄 // 卸载时m.destroy(); target.dispose();为什么要双缓冲两个真实引擎陷阱塑造了这个机制完整推演见 docs/adr/0002-mask-adapter-referenced-double-buffer.md每帧换>import { canvasTarget } from morphicons/adapters; import { createMorph } from morphicons/dom; const m createMorph(canvasTarget(canvas), MENU); m.morphTo(X, snappy);接受canvas、OffscreenCanvas或裸的 2D contextworker / 已持有 context 的宿主手里通常就是后者。图标一旦变成像素SVG 模型够不到的能力全部打开️WebGL 纹理canvas 直接是texImage2D的现成源原生导出toBlob()出 PNG 精灵、captureStream() MediaRecorder 把变形过程录成视频OffscreenCanvas worker整个变形跑在主线程之外⭐动态 favicon绘制 →toDataURL()→ 换link视频/全屏 HUD 上的浮层图标与播放器同一缓冲没有 DOM 层。⚠️自带渲染循环的宿主别把主 context 交给 morph——驱动有自己的 rAF两个时钟会打架。正确姿势给图标一个专用小 canvas用onWrite回调当脏信号宿主下一帧drawImage合成进场景。需要手工合成或拖尾效果时传clear: false跳过每帧清屏。✅三者中最轻0.48 KB gzip 独立体积无布局、无 DOM 绘制每帧仅一次原生路径解析 一次 stroke 栅格化。三大格式适配器怎么选适配器方向典型场景独立体积 (gzip)svgToIcon输入SVG 标记 →IconInputIconify body、复制的svg、shadcn 路径3.34 KB已含核心时仅增 ~0.4 KBmaskTarget输出CSS mask 元素 →PathElUnoCSS presetIcons、Tailwind 图标插件0.70 KBcanvasTarget输出2D canvas →PathEl画布应用、worker、WebGL 纹理、导出0.48 KB组合使用完全合法比如用svgToIcon把 Iconify body 解析成数据再用maskTarget驱动一个i-lucide-*元素——输入与输出契约解耦任意搭配。三者都只是createMorph换了写入目标弹簧、飞行中打断、reduced motion 行为与原生路径完全一致。快速上手# 安装 bun add morphicons # 或 npm install / pnpm add # 克隆仓库本地体验 git clone https://gitcode.com/gh_mirrors/mo/morphiconsESM only、sideEffects: false具名导入哪个适配器就只付哪个适配器的字节。相关源码与延伸阅读适配器入口与理念src/adapters/index.ts输入适配器src/adapters/svg.ts输出适配器mask 双缓冲src/adapters/mask.ts输出适配器canvas/Path2Dsrc/adapters/canvas.ts架构决策docs/adr/0001-frozen-core-contracts-adapters-entry.md、docs/adr/0002-mask-adapter-referenced-double-buffer.md行为测试test/adapters-svg.test.ts、test/adapters-mask.test.ts、test/adapters-canvas.test.ts完整文档与体积门README.md小结morphicons/adapters用三个小而独立的适配器补齐了图标数据进、任意表面出的最后一公里——SVG 标记一步变数据、CSS mask 元素原地变形、Canvas 像素自由掌控。核心从不为你的 import 付账这才是任意图标表示都能动的底气。【免费下载链接】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），仅供参考