feat: redesign miniapp tabbar icons
@@ -9,10 +9,10 @@
|
||||
| 属性 | 规范值 |
|
||||
|------|--------|
|
||||
| 图标尺寸 | 81 × 81 px (基础) |
|
||||
| 安全区域 | 56 × 56 px (边距 12px) |
|
||||
| 线宽 | 2px |
|
||||
| 安全区域 | 53 × 53 px（最小边距 14px） |
|
||||
| 线宽 | 4px（缩放到导航栏后约 1.3px） |
|
||||
| 圆角 | 端点圆角 + 转折圆角 |
|
||||
| 填充 | 无（纯线性） |
|
||||
| 填充 | 默认态线性；选中态填充核心爱心 |
|
||||
|
||||
## 颜色规范
|
||||
|
||||
@@ -25,28 +25,28 @@
|
||||
## 图标清单
|
||||
|
||||
### 1. 首页 (home)
|
||||
- **意象**: 温馨小屋
|
||||
- **元素**: 屋顶三角 + 房屋主体 + 门 + 烟囱
|
||||
- **意象**: 爱心小屋
|
||||
- **元素**: 圆角屋顶 + 房屋主体 + 门内爱心
|
||||
- **文件**: `home.png` / `home-active.png`
|
||||
|
||||
### 2. 找对象 (discover)
|
||||
- **意象**: 双心相连，象征缘分匹配
|
||||
- **元素**: 两个相交的爱心
|
||||
- **意象**: 双人缘分
|
||||
- **元素**: 两个人物轮廓 + 中央爱心
|
||||
- **文件**: `discover.png` / `discover-active.png`
|
||||
|
||||
### 3. 消息 (message)
|
||||
- **意象**: 对话沟通
|
||||
- **元素**: 圆角气泡 + 小三角 + 文字线条
|
||||
- **意象**: 真诚沟通
|
||||
- **元素**: 圆角气泡 + 爱心
|
||||
- **文件**: `message.png` / `message-active.png`
|
||||
|
||||
### 4. 活动 (activity)
|
||||
- **意象**: 日程安排
|
||||
- **元素**: 日历主体 + 挂环 + 日期标记点
|
||||
- **意象**: 公益相遇
|
||||
- **元素**: 日历主体 + 挂环 + 爱心
|
||||
- **文件**: `activity.png` / `activity-active.png`
|
||||
|
||||
### 5. 我的 (mine)
|
||||
- **意象**: 个人用户
|
||||
- **元素**: 圆形头部 + 半圆身体轮廓
|
||||
- **意象**: 个人守护
|
||||
- **元素**: 单人轮廓 + 胸前爱心
|
||||
- **文件**: `mine.png` / `mine-active.png`
|
||||
|
||||
## 导出尺寸
|
||||
|
||||
|
Before Width: | Height: | Size: 436 B After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 741 B After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 433 B After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 737 B After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 274 B After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 528 B After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 819 B After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 274 B After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 527 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 816 B After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 457 B After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 452 B After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 858 B After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 401 B After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 714 B After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 419 B After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 826 B After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 413 B After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 821 B After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 10 KiB |
@@ -1,12 +1,5 @@
|
||||
<!-- 活动 - 日历图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="25" cy="18" r="5" stroke="#E96B6B" stroke-width="2"/>
|
||||
<circle cx="56" cy="18" r="5" stroke="#E96B6B" stroke-width="2"/>
|
||||
<rect x="12" y="26" width="57" height="40" rx="8" stroke="#E96B6B" stroke-width="2"/>
|
||||
<line x1="16" y1="36" x2="65" y2="36" stroke="#E96B6B" stroke-width="2"/>
|
||||
<circle cx="25" cy="46" r="3" fill="#E96B6B"/>
|
||||
<circle cx="40.5" cy="46" r="3" fill="#E96B6B"/>
|
||||
<circle cx="56" cy="46" r="3" fill="#E96B6B"/>
|
||||
<circle cx="33" cy="56" r="3" fill="#E96B6B"/>
|
||||
<circle cx="48" cy="56" r="3" fill="#E96B6B"/>
|
||||
<title>公益日历</title>
|
||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/></g>
|
||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 696 B After Width: | Height: | Size: 555 B |
@@ -1,16 +1,5 @@
|
||||
<!-- 活动 - 日历图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 挂环 -->
|
||||
<circle cx="25" cy="18" r="5" stroke="#999999" stroke-width="2"/>
|
||||
<circle cx="56" cy="18" r="5" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 日历主体 -->
|
||||
<rect x="12" y="26" width="57" height="40" rx="8" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 分隔线 -->
|
||||
<line x1="16" y1="36" x2="65" y2="36" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 日期点 -->
|
||||
<circle cx="25" cy="46" r="3" fill="#999999"/>
|
||||
<circle cx="40.5" cy="46" r="3" fill="#999999"/>
|
||||
<circle cx="56" cy="46" r="3" fill="#999999"/>
|
||||
<circle cx="33" cy="56" r="3" fill="#999999"/>
|
||||
<circle cx="48" cy="56" r="3" fill="#999999"/>
|
||||
<title>公益日历</title>
|
||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/></g>
|
||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 765 B After Width: | Height: | Size: 552 B |
@@ -1,5 +1,5 @@
|
||||
<!-- 找对象 - 双心图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 32C28 26 32 22 36 22C38 22 40 23 41 25C42 23 44 22 46 22C50 22 54 26 54 32C54 38 48 44 41 50C34 44 28 38 28 32Z" stroke="#E96B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M42 36C42 30 46 26 50 26C52 26 54 27 55 29C56 27 58 26 60 26C64 26 68 30 68 36C68 42 62 48 55 54C48 48 42 42 42 36Z" stroke="#E96B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<title>双人缘分</title>
|
||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/></g>
|
||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 599 B |
@@ -1,7 +1,5 @@
|
||||
<!-- 找对象 - 双心图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 左心 -->
|
||||
<path d="M28 32C28 26 32 22 36 22C38 22 40 23 41 25C42 23 44 22 46 22C50 22 54 26 54 32C54 38 48 44 41 50C34 44 28 38 28 32Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 右心 -->
|
||||
<path d="M42 36C42 30 46 26 50 26C52 26 54 27 55 29C56 27 58 26 60 26C64 26 68 30 68 36C68 42 62 48 55 54C48 48 42 42 42 36Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<title>双人缘分</title>
|
||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/></g>
|
||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 595 B After Width: | Height: | Size: 596 B |
@@ -1,7 +1,5 @@
|
||||
<!-- 首页 - 房子图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="58" y="18" width="8" height="14" rx="2" stroke="#E96B6B" stroke-width="2"/>
|
||||
<path d="M40.5 16L22 34H59L40.5 16Z" stroke="#E96B6B" stroke-width="2" stroke-linejoin="round"/>
|
||||
<rect x="24" y="34" width="33" height="22" rx="4" stroke="#E96B6B" stroke-width="2"/>
|
||||
<rect x="35" y="46" width="11" height="10" rx="2" stroke="#E96B6B" stroke-width="2"/>
|
||||
<title>爱心小屋</title>
|
||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/></g>
|
||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 511 B After Width: | Height: | Size: 563 B |
@@ -1,11 +1,5 @@
|
||||
<!-- 首页 - 房子图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 烟囱 -->
|
||||
<rect x="58" y="18" width="8" height="14" rx="2" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 屋顶 -->
|
||||
<path d="M40.5 16L22 34H59L40.5 16Z" stroke="#999999" stroke-width="2" stroke-linejoin="round"/>
|
||||
<!-- 房屋主体 -->
|
||||
<rect x="24" y="34" width="33" height="22" rx="4" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 门 -->
|
||||
<rect x="35" y="46" width="11" height="10" rx="2" stroke="#999999" stroke-width="2"/>
|
||||
<title>爱心小屋</title>
|
||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/></g>
|
||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 560 B |
@@ -1,8 +1,5 @@
|
||||
<!-- 消息 - 对话气泡图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="12" y="18" width="57" height="36" rx="10" stroke="#E96B6B" stroke-width="2"/>
|
||||
<path d="M22 54L16 64L28 54" stroke="#E96B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="20" y1="28" x2="61" y2="28" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="36" x2="53" y2="36" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="44" x2="45" y2="44" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<title>爱心对话</title>
|
||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/></g>
|
||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 655 B After Width: | Height: | Size: 597 B |
@@ -1,11 +1,5 @@
|
||||
<!-- 消息 - 对话气泡图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 气泡主体 -->
|
||||
<rect x="12" y="18" width="57" height="36" rx="10" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 小三角 -->
|
||||
<path d="M22 54L16 64L28 54" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 文字线条 -->
|
||||
<line x1="20" y1="28" x2="61" y2="28" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="36" x2="53" y2="36" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="44" x2="45" y2="44" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<title>爱心对话</title>
|
||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/></g>
|
||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 709 B After Width: | Height: | Size: 594 B |
@@ -1,7 +1,5 @@
|
||||
<!-- 我的 - 用户图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="40.5" cy="28" r="14" stroke="#E96B6B" stroke-width="2"/>
|
||||
<path d="M22 62C22 50 30 44 40.5 44C51 44 59 50 59 62" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="22" y1="52" x2="22" y2="62" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="59" y1="52" x2="59" y2="62" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<title>个人守护</title>
|
||||
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/></g>
|
||||
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 534 B After Width: | Height: | Size: 540 B |
@@ -1,10 +1,5 @@
|
||||
<!-- 我的 - 用户图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 头部 -->
|
||||
<circle cx="40.5" cy="28" r="14" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 身体 -->
|
||||
<path d="M22 62C22 50 30 44 40.5 44C51 44 59 50 59 62" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<!-- 身体两侧 -->
|
||||
<line x1="22" y1="52" x2="22" y2="62" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="59" y1="52" x2="59" y2="62" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<title>个人守护</title>
|
||||
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/></g>
|
||||
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 579 B After Width: | Height: | Size: 537 B |