更新记录

1.0.0（2026-01-20） 下载此版本

1.0.0

平台兼容性

uni-app(4.83)

lrb-svg-icons

跨平台 SVG 图标组件库，支持 H5/小程序/App

特性

• ✅ 跨平台兼容：H5 使用原生 <svg>，小程序使用 Base64 编码方案
• ✅ easycom 自动引入：无需手动 import，直接使用
• ✅ TypeScript 支持：完整的类型定义
• ✅ 主题适配：默认使用 currentColor，自动继承父元素颜色
• ✅ 按需加载：只打包使用的图标，减小包体积
• ✅ 图标生成器：支持从 SVG 代码或 URL 快速生成新图标

安装

方式一：通过 uni_modules 导入（推荐）

1. 将 lrb-svg-icons 文件夹复制到项目的 src/uni_modules/ 目录
2. 重启项目即可使用

方式二：通过 HBuilderX 插件市场

1. 在 HBuilderX 中打开插件市场
2. 搜索 "lrb-svg-icons"
3. 点击导入

使用方式

基础用法

<template>
  <view>
    <!-- easycom 自动引入，无需 import -->
    <svg-home />
    <svg-user :size="64" />
    <svg-heart color="red" />
    <svg-sun :stroke-width="1.5" />
  </view>
</template>

Props 说明

主题适配示例

<template>
  <view class="container">
    <!-- 自动继承父元素颜色 -->
    <svg-home />

    <!-- 使用 CSS 变量 -->
    <svg-user color="var(--primary)" />

    <!-- 直接指定颜色 -->
    <svg-heart color="#ef4444" />
  </view>
</template>

<style>
.container {
  color: var(--foreground);
}
</style>

支持 filled 的图标

部分图标支持 filled 属性，可以切换填充/描边状态：

<template>
  <view>
    <!-- 描边状态 -->
    <svg-heart />

    <!-- 填充状态 -->
    <svg-heart :filled="true" color="red" />

    <!-- 动态切换 -->
    <svg-bookmark :filled="isBookmarked" @click="toggleBookmark" />
  </view>
</template>

支持 filled 的图标：

• svg-heart
• svg-star
• svg-bookmark

可用图标

导航和布局

• svg-home - 首页
• svg-layout-dashboard - 仪表板
• svg-arrow-left - 左箭头
• svg-chevron-up - 上箭头
• svg-chevron-left - 左箭头（小）
• svg-chevron-right - 右箭头（小）

媒体控制

• svg-play - 播放
• svg-pause - 暂停

用户和认证

• svg-user - 用户
• svg-lock - 锁定
• svg-eye - 显示
• svg-eye-off - 隐藏

内容和媒体

• svg-book-open - 书籍
• svg-clipboard-list - 清单
• svg-camera - 相机
• svg-image - 图片

社交和互动

• svg-heart - 喜欢（支持 filled）
• svg-star - 星标（支持 filled）
• svg-bookmark - 书签（支持 filled）
• svg-share - 分享
• svg-message-square - 消息

商业和数据

• svg-shopping-cart - 购物车
• svg-store - 商店
• svg-bar-chart - 柱状图

工具和设置

• svg-sun - 太阳/亮色主题
• svg-moon - 月亮/暗色主题
• svg-palette - 调色板
• svg-type - 文字
• svg-phone - 电话
• svg-calendar - 日历
• svg-map-pin - 地图标记

第三方平台

• svg-we-chat - 微信
• svg-q-q - QQ
• svg-alipay - 支付宝

其他

• svg-alert-triangle - 警告

添加新图标

方式一：使用图标生成器

# 从 SVG 代码生成
node uni_modules/lrb-svg-icons/scripts/generate-icon.js \
  --name "arrow-right" \
  --svg '<svg>...</svg>'

# 从 URL 生成
node uni_modules/lrb-svg-icons/scripts/generate-icon.js \
  --name "arrow-right" \
  --url "https://example.com/icon.svg"

方式二：手动创建

1. 在 components/ 目录下创建新文件夹，如 svg-new-icon/
2. 创建 svg-new-icon.vue 文件
3. 参考现有图标的模板结构编写代码

补充说明

本插件内置图标有限，用户可根据上述方法轻松添加对应项目需要的图标。

平台兼容性

技术原理

H5 平台

直接使用 SVG 标签，支持 CSS 样式控制，性能最优。

小程序平台

由于小程序不支持直接使用 SVG 标签，采用以下方案：

1. 将 SVG 代码转换为 Base64 编码
2. 使用 <image> 组件显示
3. 通过动态生成 SVG 字符串实现颜色和尺寸控制

注意事项

1. 颜色继承：默认使用 currentColor，会继承父元素的 color 样式
2. 尺寸单位：size 属性使用 rpx 单位，自动适配不同屏幕
3. 小程序限制：小程序中 currentColor 会被替换为 #0f172a（深色）
4. 性能优化：只会打包使用的图标，未使用的图标不会增加包体积

更新日志

查看 CHANGELOG.md

许可证

MIT License

相关链接

• Lucide Icons - 部分图标来源
• uni-app 官方文档