更新记录

1.1.2（2026-09-19）

• 修复使用HBuilder X 5.26编译语法报错问题。

1.1.1（2026-09-18）

• 上传示例代码。

1.1.0（2026-09-18）

• 完善说明文档、优化性能。

平台兼容性

uni-app x(4.83)

umi-svg

uni-app x UTS 标准模式组件。Android / iOS / HarmonyOS 上原生渲染 SVG；Web、微信小程序用 image 回退。支持蒸汽模式（vapor）。

• 支持 SVG 字符串、本地 /static/ 路径、网络地址、data:image/svg+xml
• 缩放模式对齐 image 的 mode
• 组件名 <umi-svg>，符合 easycom

平台实现

插件按 UTS 插件目录 分端：utssdk/web/index.uts、utssdk/mp-weixin/index.uts 导出 UmiSvgErrorPayload / SvgView（Web/小程序无原生 View，类仅为 uts-proxy）。

安装

将 umi-svg-x 放到项目 uni_modules。可在 pages.json 显式指定：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^umi-svg$": "@/uni_modules/umi-svg-x/components/umi-svg/umi-svg.uvue"
    }
  }
}

基本用法

<umi-svg :src="logoSvg" :width="120" :height="120" mode="aspectFit"></umi-svg>

<umi-svg src="/static/svg-demo.svg" width="120px" height="120px" mode="aspectFit"></umi-svg>

<umi-svg :src="logoSvg" :width="120" :height="120" fillColor="red" radius="50%"></umi-svg>

<umi-svg src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f30d.svg"
  :width="240" :height="240"></umi-svg>

请为组件设置 width / height，或由外部样式给出宽高。

属性

事件

方法

ref 调用：setSrc(src)、clear()、reload()。

注意事项

1. 自定义调试基座：含原生 UTS。Windows / 未装 Xcode 的 Mac 需云打自定义基座。改 utssdk 后需重打。
2. 网络权限：插件本身未声明系统权限。加载网络 SVG 时，请在宿主工程按平台补齐：Android INTERNET、Harmony ohos.permission.INTERNET；iOS 走 ATS（https 一般无需额外配置）。
3. Android 依赖：只走仓储 com.caverock:androidsvg:1.4（utssdk/app-android/config.json）。不要再把 androidsvg-1.4.jar 放进 libs/，否则云打包 Duplicate class。
4. iOS 网络 SVG：由逻辑层 uni.request 拉文本再交给 WKWebView。
5. Web / 微信小程序：无 fillColor 的网络地址直接给 image（小程序只保证网络 SVG）。设置 fillColor 时会 uni.request 拉 SVG 文本再着色，小程序需配置 download/request 合法域名。
6. 蒸汽模式：工程 manifest.json 打开 uni-app-x.vapor。App 使用 script setup + native-view。
7. 鸿蒙修改属性热更新不生效，请重新编译！