Icon Manager (图标管理器)

这是一个基于 Astro 构建的静态图标管理工具，专为部署在阿里云 ESA (Edge Security Acceleration) 边缘节点设计。它提供了一个轻量、高性能的界面来浏览、搜索和管理大量图标资源，并提供标准的 JSON API 供外部调用。 支持阿里云 ESA 边缘节点部署，利用其全局 CDN 分发能力，实现毫秒级响应时间。 只要fork本项目，将图标文件放入 src/icons/ 目录，即可快速部署自己的图标管理服务。也可以直接使用本项目的自带的图标资源。

✨ 功能特性

• ⚡️ 极速访问：纯静态构建 (Static Site Generation)，配合边缘节点分发，加载速度极快。
• 🔍 实时搜索：支持按图标英文名、中文名、域名进行实时过滤。
• 📦 零依赖：图标数据直接从文件系统读取，无需数据库。
• 🔌 开放 API：自动生成 /icons.json 接口，允许其他项目直接获取全量图标数据。
• 💎 懒加载：原生图片懒加载支持，优化大量图片的浏览体验。
• 🛠 开发者友好：提供复制路径和直接下载功能。

📂 图标命名规范

为了让工具正确解析图标信息，文件名必须遵循以下命名规范（使用双连字符 -- 作为分隔符）：

英文名--中文名--域名.扩展名

示例：

• Bilibili--哔哩哔哩--qdnas-s.png
  • 英文名: Bilibili
  • 中文名: 哔哩哔哩
  • 域名/备注: qdnas-s
• Aliyun--阿里云--aliyun.com.png

注意：为了确保 URL 兼容性，请避免在文件名中使用 +、空格或其他特殊字符。系统会自动将文件名解析为结构化数据。

🚀 快速开始

本地开发

1. 安装依赖

   npm install

2. 启动开发服务器

   npm run dev

   访问 http://localhost:4321 查看效果。

构建部署

1. 构建生产版本

   npm run build

   构建产物将输出到 dist/ 目录。

2. 部署到阿里云 ESA 本项目已配置 esa.jsonc，可直接通过阿里云 ESA CLI 工具进行部署，或将 dist/ 目录内容上传至 ESA 边缘存储。

🔌 API 接口

本项目提供一个只读的 JSON 接口，包含所有图标的元数据。

• Endpoint: /icons.json
• Method: GET
• Content-Type: application/json
• CORS: 允许跨域 (Access-Control-Allow-Origin: *)

响应示例：

[
  {
    "name": "Bilibili",
    "cnName": "哔哩哔哩",
    "domain": "qdnas-s",
    "filename": "Bilibili_A--哔哩哔哩--qdnas-s.png",
    "url": "/icon/Bilibili_A--哔哩哔哩--qdnas-s.png",
    "downloadUrl": "/icon/Bilibili_A--哔哩哔哩--qdnas-s.png"
  },
  // ...
]

在外部项目中使用：

// 示例：获取图标列表
const res = await fetch('https://your-domain.com/icons.json');
const icons = await res.json();
console.log(icons);

📁 项目结构

.
├── public/
│   └── icon/          # 存放所有图标文件
├── src/
│   └── pages/
│       ├── index.astro    # 主页（UI界面）
│       └── icons.json.ts  # API 生成逻辑
├── astro.config.mjs   # Astro 配置文件
├── esa.jsonc          # 阿里云 ESA 部署配置
└── package.json

📄 License

MIT