更新记录

2.0.3（2026-07-23）

• fix: 修复handleViewInit缺少箭头

2.0.2（2026-07-21）

• fix: 修复安卓报错问题

2.0.1（2026-07-21）

• chored 更新依赖

平台兼容性

uni-app(4.45)

uni-app x(4.61)

name: lime-svg 矢量图标 description: 基于 UTS 实现的原生矢量图标插件，支持加载本地、网络、源文本和 Base64 格式的 SVG 图标，可自定义颜色。 tags:

• svg
• 图标
• 矢量
• 原生 componentTag: l-svg plugin: lime-svg category: 原生组件 dependencies:

• lime-shared

lime-svg 矢量图标

一款基于 UTS 实现的原生矢量图标插件，支持 uniapp 和 uniappx。该插件提供了两种渲染机制：原生插件和 WebView，可以根据需求选择合适的渲染方式。支持加载本地、网络、源文本和 Base64 格式的 SVG 图标，并且可以自定义图标颜色。

插件依赖：lime-shared

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-svg
2. 由于普通授权版无法自定义基座，如需使用原生渲染请购买源码版
3. 在页面中使用 l-svg 组件（组件）或 lime-svg（演示）

::: tip 注意🔔

• uniappx 安卓和 iOS 在 HBX4.81 之前需要自定义基座，之后不需要
• 原生插件实现不支持动画，如需动画请使用 WebView 渲染（web=true） :::

代码演示

基础使用

通过设置 src 来加载 SVG 图标，支持本地路径、网络 URL、SVG 源文本和 Base64 编码等多种方式。

<!-- 本地文件加载 -->
<l-svg style="width: 150rpx;height: 150rpx;" src="/static/svg/a.svg"></l-svg>

<!-- 网络文件加载 -->
<l-svg style="width: 150rpx;height: 150rpx;" src="https://www.xmplus.cn/uploads/images/20221228/b9e9d45054ab5795992a1e92584a278b.svg"></l-svg>

<!-- SVG 源文本加载 -->
<l-svg style="width: 150rpx;height: 150rpx;" src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'></l-svg>

<!-- Base64 编码加载 -->
<l-svg style="width: 150rpx;height: 150rpx;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"></l-svg>

颜色设置

通过设置 color 来改变 SVG 图标颜色，注意：只支持纯色图标，多色图标无效。

<!-- 设置红色 -->
<l-svg
  style="width: 150rpx;height: 150rpx;"
  color="red"
  src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'
></l-svg>

<!-- 设置红色（Base64） -->
<l-svg
  style="width: 150rpx;height: 150rpx;"
  color="red"
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgMTVoMS41VjlINXYxLjVoMXptMi41IDBIMTNWOUg4LjV6bTEuNS0xLjV2LTNoMS41djN6bTQgMS41aDEuNXYtMi4yNUwxNy4yNSAxNUgxOWwtMi4yNS0zTDE5IDloLTEuNzVsLTEuNzUgMi4yNVY5SDE0ek0zIDIxVjNoMTh2MTh6Ii8+PC9zdmc+"
></l-svg>

WebView 渲染

通过设置 :web="true" 使用 WebView 渲染，支持动画效果。

<l-svg
  style="width: 150rpx;height: 150rpx;"
  :web="true"
  src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15h1.5V9H5v1.5h1zm2.5 0H13V9H8.5zm1.5-1.5v-3h1.5v3zm4 1.5h1.5v-2.25L17.25 15H19l-2.25-3L19 9h-1.75l-1.75 2.25V9H14zM3 21V3h18v18z"/></svg>'
></l-svg>

API 文档

Props 分类

🎯 基础配置

🎨 样式与外观

⚙️ 行为与交互

🔧 高级配置

Events

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

注：非 uni-app-x APP 端默认宽高为 1em，uni-app-x APP 端默认宽高为 24px，可通过 lStyle 或外部 CSS 覆盖。

使用示例

方式一：通过 lStyle 属性直接设置

在单个组件实例上直接设置样式。

<l-svg
    src="/static/svg/a.svg"
    :lStyle="{
        width: '32px',
        height: '32px'
    }">
</l-svg>

方式二：通过 lClass 配合 CSS 样式

通过自定义类名设置样式。

<l-svg lClass="custom-svg" src="/static/svg/a.svg" />

<style>
.custom-svg {
    width: 32px;
    height: 32px;
}
</style>

⚠️ 重要提示

<!-- 错误写法：不要在自定义组件上直接使用 class -->
<l-svg class="custom-style" />

<!-- 正确写法：使用 lClass 或 lStyle -->
<l-svg lClass="custom-style" />
<l-svg :lStyle="{ width: '32px', height: '32px' }" />

<!-- 正确写法：在父级上设置 class -->
<view class="custom-style">
    <l-svg />
</view>

暗黑模式

该组件不依赖 CSS 变量进行主题适配，图标颜色完全由 color 属性控制。在暗黑模式下，可通过响应式变量动态设置 color 值以适配主题。

<l-svg :color="isDark ? '#ffffff' : '#333333'" src="/static/svg/a.svg"></l-svg>

Vue2 使用说明

插件使用了 composition-api，如需在 Vue2 项目中使用，请按照官方教程配置。

关键配置代码（在 main.js 中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-svg/components/lime-svg -->
<lime-svg />

插件标签说明

文档链接

📚 组件详细文档请访问以下站点：

• 矢量图标文档 - 站点1
• 矢量图标文档 - 站点2
• 矢量图标文档 - 站点3

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助