更新记录

2.1.2（2026-08-15） 下载此版本

  • 优化组件性能。

2.1.1（2026-08-15） 下载此版本

  • 优化已知问题。

2.1.0（2026-08-13） 下载此版本

1、修复已知问题； 2、优化插件性能。

查看更多

平台兼容性

uni-app(5.01)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ × √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ √ √

svg-icon

非常感谢之前的支持者（ 🙇 🙇 🙇）！有问题欢迎反馈！！！

重磅更新！！！现支持APP（Android、IOS、Harmony）、小程序、ASCF元服务等平台。

如果想兼容.nvue、.uvue页面，请使用uts组件，下载地址：(https://ext.dcloud.net.cn/plugin?id=29251)

  • 支持 SVG 字符串、本地路径、static 资源、网络地址、data:image/svg+xml
  • 缩放模式对齐 image 的 mode
  • 符合 easycom，导入后无需 import、无需注册
  • 最低 HBuilderX 4.31+（Harmony 建议 4.61+）

平台说明

插件市场详情页的「平台兼容性」以 package.json 为准。

安装

  1. 通过插件市场导入，或将 svg-icon 放到项目 uni_modules 目录。
  2. 插件 components 符合 easycom，页面中直接写 <svg-icon> 即可。

普通 uni-app 无需上述配置，autoscan 会使用 svg-icon.vue。

基本用法

以下示例与工程 pages/index/index 一致，覆盖三种常见 src。

普通 uni-app（vue）

<template>
  <svg-icon :width="120" :height="120" :radius="24" :src="logoSvg" mode="aspectFit" @load="onLoad" @error="onError" />
</template>

<script setup>
const logoSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <rect width="120" height="120" rx="24" fill="#2563eb"/>
  <path d="M31 63l18 18 40-44" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`

function onLoad() {}
function onError(e) {
  console.error(e)
}
</script>

也支持：

<svg-icon :width="240" :height="160" src="/static/svg-demo.svg" />
<svg-icon width="120px" height="120px" src="https://www.w3.org/Icons/SVG/svg-logo.svg" />
<svg-icon style="width: 120px; height: 120px;" :src="dataUrl" />
<svg-icon :width="120" :height="120" :radius="24" src="/static/svg-demo.svg" />
<svg-icon width="120px" height="120px" radius="50%" src="/static/svg-demo.svg" />
<svg-icon :width="120" :height="120" fillColor="#e11d48" :src="monoSvg" />

请为组件设置 width / height 属性，或通过外部样式指定宽高。

属性

属性名 类型 默认值 说明
src String "" SVG 来源：内联 SVG 字符串 / http(s) 地址 / 本地或 /static/ 路径 / data:image/svg+xml
mode String aspectFit 同 image：scaleToFill / aspectFit / aspectFill
width Number / String "" 宽度。Number 单位为 rpx；String 原样使用（如 120px、100%）
height Number / String "" 高度，规则同 width
radius Number / String "" 圆角。Number 单位为 rpx；String 原样使用（如 12px、50%）
fillColor String "" 设置填充颜色。仅对 SVG 图源生效，设置后会替换 SVG 中所有可绘制元素的填充颜色（fill="none"、渐变 url() 除外，不改描边）

事件

事件名 回调参数 说明
load - 渲染成功
error { errMsg: string } 渲染失败。errMsg 常见值见下方

error.errMsg 常见值：

errMsg 含义
svg http fail 网络请求失败
svg http content invalid 响应不是合法 SVG
svg local read fail 本地文件读取失败
svg local content invalid 本地文件内容不是合法 SVG
svg render fail 原生 / 视图层渲染失败
svg image fail image 回退渲染失败（Web / 小程序 / 鸿蒙）

方法

通过 ref 获取组件实例后调用。

方法名 参数 返回值 说明
setSrc src: string void 动态设置 SVG 来源，逻辑同属性 src
clear - void 清空当前内容
reload - void 重新解析并渲染当前 src 
<svg-icon ref="svgRef" :src="logoSvg" :width="120" :height="120"></svg-icon>
// uni-app / Options API
this.$refs.svgRef.setSrc(newSrc)
this.$refs.svgRef.reload()
this.$refs.svgRef.clear()

注意事项

  1. 网络 SVG 权限 Android / Harmony / iOS 访问网络 SVG 时，请在项目 manifest.json 中按平台补齐网络相关配置（插件目录不能携带 manifest.json）。

  2. 宽高 组件默认 width / height 为空。未设置时依赖外部样式或父容器；建议始终显式指定，避免部分端高度为 0。

  3. fillColor 对齐 HarmonyOS Image.fillColor：只替换可绘制元素的填充色，不改 stroke。多色 SVG 的填充会被统一成同一颜色。网络 SVG 着色时需要能拉取到源码（小程序请配置 download / request 合法域名）。未设置时保持原始配色。

目录结构

uni_modules/svg-icon/
├── components/svg-icon/svg-icon.vue     # 普通 uni-app easycom
├── package.json
├── changelog.md
└── readme.md

参考

隐私、权限声明

1. 本插件需要申请的系统权限列表：

Harmony、Android、IOS 访问网络 SVG 时需要 INTERNET 权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...