Iconfont 悬停预览

给 Trae / VS Code 使用的本地扩展。在 Vue 中把鼠标停在  上，即可预览项目字体里的真实图标，同时查看编码、字体来源和可用的图标名称。无需修改 Vue 代码或业务项目依赖。

安装到 Trae

1. 在 Trae 扩展面板右上角的 … 中选择“从 VSIX 安装 / Install from VSIX…”。也可以通过命令面板搜索该命令。
2. 选择 artifacts/local-iconfont-hover-0.1.0.vsix。
3. 如果 Trae 提示重新加载窗口，按提示重新加载。
4. 用 Trae 打开项目文件夹，再打开 Vue 文件，将鼠标停在  编码上。若关闭了编辑器悬停，需要打开 editor.hover.enabled。

支持的编码

• HTML / Vue：、、。
• JS / TS：\ue91c、\u{e91c}。
• CSS / SCSS / LESS：\e91c。

仅对 Unicode 私用区编码生效，避免影响普通文字的悬停提示。支持本地文件工作区中的 Vue、HTML、JS、TS、JSX、TSX、CSS、SCSS、LESS。Vue 文件不依赖额外安装 Vue 语言插件；被识别为纯文本时也能预览。

字体查找

默认查找当前工作区中名称包含 iconfont 的 .ttf、.otf、.woff、.woff2 文件，排除 node_modules、构建产物等目录。同路径同名字体的不同格式只显示一次，优先 TTF。不同字体包含相同编码时分别显示并标明路径；扩展不推断浏览器最终使用的 CSS font-family。

本项目会找到主 iconfont、海外菜单字体和 planIcon 字体。只想预览主字体时，在 Trae 设置中搜索 iconfontHover.fontFiles，配置为：

{
  "iconfontHover.fontFiles": ["src/assets/fonts/iconfont.ttf"]
}

支持多个相对工作区的路径或绝对路径。显式配置时按配置顺序展示；自动发现按字体路径排序。工作区含多个项目时只查找当前文件所属项目。字体同目录有同名 iconfont JSON 时，读取其中 glyphs[].unicode 和 glyphs[].name 展示图标名称。

字体更新后自动清除内存缓存；图标名称在每次悬停时读取。解析失败不会用其他图案代替，详情在“输出 → Iconfont 悬停预览”查看。预览图由本地字体轮廓生成，存放在编辑器的扩展全局存储目录；运行时不发送字体或源码到外部服务，也不执行源码。

开发与打包

在此目录执行：

npm ci
npm test
npm run package

依赖和构建结果独立于业务项目。测试使用仓库现有字体，不复制字体资源。VSIX 包只包含扩展清单、README、打包后的 JS、WASM 及第三方依赖声明。字体解析复用 fontkit，PNG 生成复用 resvg WASM，无需本机原生编译。

tests/trae.cjs 是编辑器集成测试入口，可通过 Trae 的 --extensionDevelopmentPath 和 --extensionTestsPath 在隔离的用户目录中运行；需把仓库根目录作为工作区打开。验证实际 HoverProvider 返回值、图标名称、来源字体和可读取的 PNG 图片。