fastbee/yack-mini/docs/图标资源获取指南.md

图标资源获取指南

需要的图标清单

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）

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'

响应格式

{
  "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 等

批量下载脚本示例

// 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/
   • 国际知名图标库

颜色值参考

/* 主题色 */
--primary-color: #1890ff;

/* TabBar 普通状态 */
--tabbar-normal: #999999;

/* TabBar 激活状态 */
--tabbar-active: #1890ff;

/* 辅助灰色 */
--gray-light: #f5f5f5;