214 lines
5.7 KiB
Markdown
214 lines
5.7 KiB
Markdown
# 图标资源获取指南
|
||
|
||
## 需要的图标清单
|
||
|
||
### 1. TabBar 图标（底部导航栏）
|
||
- **device.png** - 设备图标（普通状态）
|
||
- 搜索关键词：设备、蓝牙、bluetooth、chip、device
|
||
- 颜色：#999999（灰色）
|
||
- 尺寸：81px × 81px
|
||
|
||
- **device-active.png** - 设备图标（激活状态）
|
||
- 同上图标，颜色改为：#1890ff（蓝色）
|
||
|
||
- **mine.png** - 我的图标（普通状态）
|
||
- 搜索关键词：用户、user、个人中心、person
|
||
- 颜色：#999999（灰色）
|
||
- 尺寸：81px × 81px
|
||
|
||
- **mine-active.png** - 我的图标（激活状态）
|
||
- 同上图标，颜色改为：#1890ff（蓝色）
|
||
|
||
### 2. 功能图标
|
||
- **default-avatar.png** - 默认头像
|
||
- 搜索关键词：头像、avatar、用户头像、default avatar
|
||
- 建议尺寸：200px × 200px
|
||
- 颜色：浅灰色填充
|
||
|
||
- **device-empty.png** - 空状态占位图
|
||
- 搜索关键词：空状态、empty、无数据、no data
|
||
- 建议尺寸：300px × 300px
|
||
- 建议：选择带有设备元素的空状态插画
|
||
|
||
- **ble-scan.png** - 蓝牙扫描图标
|
||
- 搜索关键词：蓝牙扫描、bluetooth scan、搜索、search
|
||
- 建议尺寸：120px × 120px
|
||
- 颜色：#1890ff（主题蓝色）
|
||
|
||
## iconfont 使用步骤
|
||
|
||
### 1. 访问网站
|
||
https://www.iconfont.cn/
|
||
|
||
### 2. 搜索图标
|
||
- 使用上面提供的关键词搜索
|
||
- 筛选条件：
|
||
- 类型：图标
|
||
- 风格：线性/面性（根据喜好选择）
|
||
- 免费：是
|
||
|
||
### 3. 选择并添加到项目
|
||
- 点击喜欢的图标
|
||
- 添加到购物车
|
||
- 创建项目：yack-mini-icons
|
||
|
||
### 4. 下载图标
|
||
- 进入项目
|
||
- 选择 PNG 格式
|
||
- 设置对应尺寸和颜色
|
||
- 批量下载
|
||
|
||
### 5. 重命名文件
|
||
下载后按照本项目的命名规范重命名：
|
||
```
|
||
下载的图标.png → device.png
|
||
下载的图标.png → device-active.png（修改颜色后再次下载）
|
||
...
|
||
```
|
||
|
||
## 通过 API 获取图标信息
|
||
|
||
iconfont.cn 提供了搜索 API，可以通过编程方式获取图标信息。
|
||
|
||
### API 端点
|
||
```
|
||
POST https://www.iconfont.cn/api/icon/search.json
|
||
```
|
||
|
||
### 请求参数
|
||
|
||
| 参数 | 类型 | 说明 | 示例 |
|
||
|------|------|------|------|
|
||
| q | string | 搜索关键词 | 蓝牙 |
|
||
| sortType | string | 排序方式 | updated_at |
|
||
| page | int | 页码 | 1 |
|
||
| pageSize | int | 每页数量 | 54 |
|
||
| sType | string | 筛选类型 | 空（全部） |
|
||
| fromCollection | int | 来源集合 | -1 |
|
||
| fills | string | 填充参数 | 空 |
|
||
| t | long | 时间戳 | 1788578495971 |
|
||
| ctoken | string | CSRF Token | null |
|
||
|
||
### 请求示例（curl）
|
||
|
||
```bash
|
||
curl 'https://www.iconfont.cn/api/icon/search.json' \
|
||
-H 'accept: application/json, text/javascript, */*; q=0.01' \
|
||
-H 'accept-language: zh-CN,zh;q=0.9,en;q=0.8,en-US;q=0.7' \
|
||
-H 'content-type: application/x-www-form-urlencoded; charset=UTF-8' \
|
||
-H 'origin: https://www.iconfont.cn' \
|
||
-H 'referer: https://www.iconfont.cn/search/index' \
|
||
-H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' \
|
||
--data-raw 'q=%E8%93%9D%E7%89%99&sortType=updated_at&page=1&pageSize=54&sType=&fromCollection=-1&fills=&t=1788578495971&ctoken=null'
|
||
```
|
||
|
||
### 响应格式
|
||
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"data": {
|
||
"count": 1234,
|
||
"page": 1,
|
||
"pageSize": 54,
|
||
"icons": [
|
||
{
|
||
"id": "12345",
|
||
"name": "蓝牙",
|
||
"font_class": "icon-bluetooth",
|
||
"show_svg": "<svg>...</svg>",
|
||
"author_name": "作者名",
|
||
"price": 0,
|
||
"tags": ["蓝牙", "bluetooth", "设备"]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 使用建议
|
||
|
||
1. **关键词搜索**：使用中文或英文关键词，如"蓝牙"、"bluetooth"
|
||
2. **URL 编码**：中文关键词需要 URL 编码（如 `%E8%93%9D%E7%89%99` 表示"蓝牙"）
|
||
3. **分页**：通过 `page` 参数获取更多结果
|
||
4. **时间戳**：`t` 参数可使用当前时间戳，防止缓存
|
||
5. **鉴权**：部分接口需要登录态，使用 Cookie 中的 `EGG_SESS_ICONFONT` 等
|
||
|
||
### 批量下载脚本示例
|
||
|
||
```javascript
|
||
// Node.js 示例：获取蓝牙相关图标
|
||
const axios = require('axios');
|
||
|
||
async function searchIcons(keyword, page = 1) {
|
||
const params = new URLSearchParams();
|
||
params.append('q', keyword);
|
||
params.append('sortType', 'updated_at');
|
||
params.append('page', page);
|
||
params.append('pageSize', 54);
|
||
params.append('fromCollection', -1);
|
||
params.append('t', Date.now());
|
||
params.append('ctoken', 'null');
|
||
|
||
const response = await axios.post(
|
||
'https://www.iconfont.cn/api/icon/search.json',
|
||
params,
|
||
{
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
'User-Agent': 'Mozilla/5.0'
|
||
}
|
||
}
|
||
);
|
||
|
||
return response.data;
|
||
}
|
||
|
||
// 使用示例
|
||
searchIcons('蓝牙').then(data => {
|
||
console.log(`找到 ${data.data.count} 个图标`);
|
||
data.data.icons.forEach(icon => {
|
||
console.log(`- ${icon.name} (ID: ${icon.id})`);
|
||
});
|
||
});
|
||
```
|
||
|
||
### 注意事项
|
||
|
||
1. **登录态**：下载 SVG 或 PNG 可能需要登录态
|
||
2. **版权**：部分图标需要付费或遵守商用许可
|
||
3. **频率限制**：避免高频请求，建议间隔 1-2 秒
|
||
4. **Cookie 失效**：长时间使用需重新获取登录态
|
||
5. **官方推荐**：推荐使用网页界面或官方工具进行批量下载
|
||
|
||
## 替代方案
|
||
|
||
### 如果找不到合适的图标，可以使用：
|
||
|
||
1. **微信官方图标库**
|
||
- WeUI 图标库：https://weui.io/
|
||
- 提供了标准的小程序图标
|
||
|
||
2. **Ant Design 图标库**
|
||
- https://ant.design/components/icon-cn/
|
||
- 有丰富的图标资源
|
||
|
||
3. **Font Awesome**
|
||
- https://fontawesome.com/
|
||
- 国际知名图标库
|
||
|
||
## 颜色值参考
|
||
|
||
```css
|
||
/* 主题色 */
|
||
--primary-color: #1890ff;
|
||
|
||
/* TabBar 普通状态 */
|
||
--tabbar-normal: #999999;
|
||
|
||
/* TabBar 激活状态 */
|
||
--tabbar-active: #1890ff;
|
||
|
||
/* 辅助灰色 */
|
||
--gray-light: #f5f5f5;
|
||
``` |