soul-yongping/miniprogram/components/icon

Icon 图标组件

SVG 图标组件，参考 lucide-react 实现，用于在小程序中使用矢量图标。

技术实现: 使用 Base64 编码的 SVG + image 组件（小程序不支持直接使用 SVG 标签）

---

使用方法

1. 在页面 JSON 中引入组件

{
  "usingComponents": {
    "icon": "/components/icon/icon"
  }
}

2. 在 WXML 中使用

<!-- 基础用法 -->
<icon name="share" size="48" color="#00CED1"></icon>

<!-- 分享图标 -->
<icon name="share" size="40" color="#ffffff"></icon>

<!-- 箭头图标 -->
<icon name="arrow-up-right" size="32" color="#00CED1"></icon>

<!-- 搜索图标 -->
<icon name="search" size="44" color="#ffffff"></icon>

<!-- 返回图标 -->
<icon name="chevron-left" size="48" color="#ffffff"></icon>

<!-- 心形图标 -->
<icon name="heart" size="40" color="#E91E63"></icon>

---

属性说明

属性	类型	默认值	说明
name	String	'share'	图标名称
size	Number	48	图标大小（rpx）
color	String	'currentColor'	图标颜色
customClass	String	''	自定义类名
customStyle	String	''	自定义样式

---

可用图标

图标名称	说明	对应 lucide-react
share	分享	<Share2>
arrow-up-right	右上箭头	<ArrowUpRight>
chevron-left	左箭头	<ChevronLeft>
search	搜索	<Search>
heart	心形	<Heart>

---

添加新图标

在 icon.js 的 getSvgPath 方法中添加新图标：

getSvgPath(name) {
  const svgMap = {
    'new-icon': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!-- SVG path 数据 --></svg>',
    // ... 其他图标
  }
  return svgMap[name] || ''
}

获取 SVG 代码: 访问 lucide.dev 搜索图标，复制 SVG 内容。 注意: 颜色使用 COLOR 占位符，组件会自动替换。

---

样式定制

1. 使用 customClass

<icon name="share" size="48" color="#00CED1" customClass="my-icon-class"></icon>

.my-icon-class {
  opacity: 0.8;
}

2. 使用 customStyle

<icon name="share" size="48" color="#ffffff" customStyle="opacity: 0.8; margin-right: 10rpx;"></icon>

---

技术说明

为什么使用 Base64 + image？

1. 矢量图标：任意缩放不失真
2. 灵活着色：通过 COLOR 占位符动态改变颜色
3. 轻量级：无需加载字体文件或外部图片
4. 兼容性：小程序不支持直接使用 SVG 标签，image 组件支持 Base64 SVG

为什么不用字体图标？

小程序对字体文件有限制，Base64 编码字体文件会增加包体积，SVG 图标更轻量。

与 lucide-react 的对应关系

• lucide-react: React 组件库，使用 SVG
• 本组件: 小程序自定义组件，也使用 SVG
• SVG path 数据: 完全相同，从 lucide 官网复制

---

示例

悬浮分享按钮

<button class="fab-share" open-type="share">
  <icon name="share" size="48" color="#ffffff"></icon>
</button>

.fab-share {
  position: fixed;
  right: 32rpx;
  bottom: calc(120rpx + env(safe-area-inset-bottom));
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

---

扩展图标库

可以继续添加更多 lucide-react 图标：

• star - 星星
• wallet - 钱包
• gift - 礼物
• info - 信息
• settings - 设置
• user - 用户
• book-open - 打开的书
• eye - 眼睛
• clock - 时钟
• users - 用户组

---

图标组件创建完成！ 🎉