176 lines
3.8 KiB
Markdown
176 lines
3.8 KiB
Markdown
# 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` - 用户组
|
||
|
||
---
|
||
|
||
**图标组件创建完成！** 🎉
|