guke
8e3b282c79
首页webview改造合并 --------- Co-authored-by: guke <guke@autohome.com.cn> Reviewed-on: #96
1.6 KiB
1.6 KiB
Shared Icons
通用图标的单一事实源（canonical source）。每个图标都是独立 SVG 文件，但实际页面里必须内联 SVG markup（不用 <img src> 或 <svg src> 引用），符合 prototypes 仓库"每个 HTML 自包含"原则。
工作流
- 改图标 → 改这里的 SVG 文件
- 在所有用到的 HTML 里同步替换内联 SVG markup
- DESIGN.md 引用本目录路径作为基准
现有图标
| 文件 | 用途 | 推荐内联尺寸 |
|---|---|---|
back-chevron.svg |
顶部导航返回按钮 | 24×24 |
tab-home-outline.svg |
底 tab "首页" 未选中态 | 24×24 |
tab-home-filled.svg |
底 tab "首页" 选中态（黄填充） | 24×24 |
tab-welfare-outline.svg |
底 tab "福利" 未选中态 | 24×24 |
tab-welfare-filled.svg |
底 tab "福利" 选中态（黄填充） | 24×24 |
tab-profile-outline.svg |
底 tab "我的" 未选中态 | 24×24 |
tab-profile-filled.svg |
底 tab "我的" 选中态（黄填充） | 24×24 |
标准 button 包装
<button class="btn-back" onclick="goBack()" aria-label="返回">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 6L9 12L15 18" stroke="#1A1A1A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
.btn-back {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; padding: 0;
cursor: pointer; -webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.btn-back:active { opacity: 0.5; }
.btn-back svg { width: 24px; height: 24px; display: block; }