哪些图标库能和morphicons一起玩？Lucide、Tabler、Heroicons兼容性清单与fitIcon跨网格适配教程

哪些图标库能和morphicons一起玩Lucide、Tabler、Heroicons兼容性清单与fitIcon跨网格适配教程【免费下载链接】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 是一个通用图标变形icon morphing库任意描边图标可以平滑变形为另一个图标自带弹簧物理效果、零运行时依赖、gzip 后约 7 KB。很多新手第一反应是——它支持哪些图标库本文给出一份 Lucide、Tabler、Heroicons、Carbon 等主流图标库的兼容性清单并手把手教你用fitIcon完成跨网格适配让你手里的任何描边图标集都能一起玩。兼容性清单速查表哪些图标库可以直接用判断标准很简单图标是否描边绘制stroke、几何是否以数据形式提供、是否画在24×24 网格上。满足三条即可开箱即用图标库网格能否直接变形备注 Lucide24×24✅ 直接可用官方示例主角数据格式即IconNodeTabler Icons24×24✅ 直接可用outline 版节点数据可直接消费Heroiconsoutline24×24✅ 直接可用仅描边版solid 版见下方Heroiconssolid20×20⚠️ 需fitIcon填充风格变形过程中读感不佳Iconoir24×24✅ 直接可用1.5px 描边Feather24×24✅ 直接可用官方 playground 已内置 8 个 Feather 图标Akar Icons / Untitled UI / Hugeicons24×24✅ 直接可用stroke 风格可用Carbon32×32⚠️ 需fitIcon(…, 32)跨网格典型代表Teenyicons15×15⚠️ 需fitIcon(…, 15)小网格同样适配shadcn registry 收录的 200 图标库视包而定✅ 传d字符串viewBox 不是 24 时补一次fitIcon❌ Material Symbols / Bootstrap Icons / Remix Icon / Phosphor 填充版—✖️ 不建议填充剪影无法按描边中心线读取一句话总结24×24 描边库直接连上其它网格的描边库用fitIcon重定网格一次即可填充风格图标暂不适合。为什么必须同网格理解 fitIcon 的必要性morphicons 的对齐算法2D Procrustes基于两个端点在同一坐标空间这一前提。如果拿 24 网格的 Lucide 箭头直接配 32 网格的 Carbon 图标缩放差会被算法误读为一次不想要的变焦σ ≈ 4/3目标图标会画出 24×24 画布之外。这不是猜测而是被测试钉死的结论详见 test/viewbox.test.ts未适配图标溢出画布、出现假缩放适配后θ ≈ 0、σ ≈ 1、残差 1e-9完全全等fitIcon 跨网格适配教程三步搞定第一步确认源图标的 viewBox打开图标库文档看viewBoxCarbon 是0 0 32 32Teenyicons 是0 0 15 15Heroicons solid 是0 0 20 20。第二步调用 fitIcon 重定到 24 网格fitIcon按 SVG 的xMidYMid meet规则缩放 居中保留宽高比返回一个普通d字符串可以在任何接受图标的地方使用。核心实现见 src/core/normalize.tsimport { fitIcon } from morphicons; const search fitIcon(carbonSearch, 32); // 32×32 → 24 网格 const bell fitIcon(teenySmallBell, 15); // 15×15 → 24 网格第二个参数三种写法都支持数字32、字符串0 0 32 32、数组[0, 0, 32, 32]见 test/viewbox.test.ts。第三步在模块作用域只算一次⚠️避坑关键fitIcon放在模块顶层调用不要放在每次渲染里——变形计划按引用缓存复用同一引用才能命中缓存。补充两点不传fitIcon也不会报错算法对相似变换不变但目标会溢出画布属于能跑但不对。React/Vue/Svelte 绑定默认viewBox0 0 24 24可通过 props 覆盖所以只要适配到 24 网格一切对齐。其它带进来的图标d 字符串与 svgToIcon除了图标包的数据导出morphicons 还接受两种输入裸d字符串——任何描边图标复制d属性即可这是最通用的万能接口shadcn registry 里 200 库的path d都能直接喂进来。svgToIcon适配器——Iconify 图标体、从网站复制的完整svg、shadcn 注册表的path一次调用即可转成可用输入且若带 viewBox 会自动调用 fitIcon 重定网格离格收藏开箱即用。解析细节见 src/adapters/svg.ts。import { svgToIcon } from morphicons/adapters; const MENU svgToIcon(menuSvgMarkup); // 解析一次复用引用注意它会主动拒绝无法诚实变形的输入纯填充图标、带transform的元素都会在解析期抛出清晰报错而不是渲染出鬼画符。新手高频问题清单Q1项目里已经在用 lucide-react要换吗不用。MorphIcon消费的是图标数据来自纯数据包lucide的IconNode不是lucide-react的组件。两个包按设计共存、都能树摇只需保持版本一致让变形的图标和静态渲染的图标对得上。Q2路径数据格式有要求吗节点列表只认 7 种描边图元path、line、circle、ellipse、rect、polyline、polygon不支持g包裹和transform坐标必须是字面量其它标签会抛出明确错误见 src/core/normalize.ts。Q3描边粗细不一致怎么办这是观感问题而非结构问题——统一的线宽、圆头端点让变形中途的形状更原生这些属性写在svg上由你的组件控制morphicons 不代管。Q4想本地亲眼看看跨库变形clone 仓库https://gitcode.com/gh_mirrors/mo/morphicons后运行 playground里面有 38 个真实图标Lucide、Feather、Tabler互相变形并实时显示每对的 θ/σ/残差读数bun install bun run play # → http://localhost:3000Feather/Tabler 数据由 playground/extract-vendor-icons.mjs 从 npm 包中真实提取生成到 playground/vendor-icons.ts。小结24×24 描边库Lucide、Tabler、Heroicons outline、Iconoir、Feather 等零配置直接变。其它网格的描边库Carbon 32、Teenyicons 15、Heroicons solid 20fitIcon(icon, viewBox)在模块作用域适配一次即可。任意来源d字符串或svgToIcon都能接住填充风格图标请先换描边版。只要图标是描边中心线 数据可得morphicons 就能让它和任意其它图标互相变形——图标库的边界就是 24 网格 fitIcon的边界。【免费下载链接】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），仅供参考