# Icon 图标组件

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

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

---

## 使用方法

### 1. 在页面 JSON 中引入组件

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

### 2. 在 WXML 中使用

```xml
<!-- 基础用法 -->
<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` 方法中添加新图标：

```javascript
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](https://lucide.dev) 搜索图标，复制 SVG 内容。
**注意**: 颜色使用 `COLOR` 占位符，组件会自动替换。

---

## 样式定制

### 1. 使用 customClass

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

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

### 2. 使用 customStyle

```xml
<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 官网复制

---

## 示例

### 悬浮分享按钮

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

```css
.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` - 用户组

---

**图标组件创建完成！** 🎉