# my-icons

**Repository Path**: opsx-tools/my-icons

## Basic Information

- **Project Name**: my-icons
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-26
- **Last Updated**: 2026-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MyIcons

面向开发者的 Web Icon 平台：搜索、在线定制、多格式下载、一键复制代码（SVG / JSX / Vue / img / CSS / Data URI / CDN）。

| 层 | 技术 |
|---|---|
| 前端 | React 19 + TypeScript + Vite + Tailwind CSS + shadcn/ui |
| 后端 | Gin (Go) + SQLite（`modernc.org/sqlite`，免 CGO） |
| 图标 | 640+ 内置（Simple Icons CC0 / Devicon MIT / VectorLogo.zone）+ 上传 / 构建管线收录 |

设计来源：`Kimi_Agent_Icon站点评估设计`（竞品对标 + 全栈化方案）。

## 目录结构

```
my-icons/
├── backend/              # Gin + SQLite API
│   ├── main.go           # 入口、配置、路由、SPA/图标静态分发
│   ├── db.go             # 建表、种子导入
│   ├── handlers.go       # icons / favorites / recents / upload
│   └── logs/             # 后端运行日志
├── frontend/             # React SPA
│   ├── icons/            # 图标源文件（构建管线输入）
│   ├── public/           # 静态资源（含 icons/、icons.json）
│   ├── scripts/          # build-icons.mjs / fetch-icons.mjs
│   ├── src/              # 页面、组件、API 客户端
│   └── logs/             # 前端 dev 日志
├── data/                 # 运行时：myicons.db + 上传 SVG（勿提交）
├── docs/                 # 设计与评估文档
├── run.sh                # 启动 / 停止 / 重启 / 构建
├── Makefile
└── Dockerfile            # 多阶段：单容器部署
```

与本机其他项目（`gin-hexo`、`opsx-web-lite`、`keepd`）一致：**`backend/` + `frontend/` + `run.sh`**。

## 快速开始

```bash
# 依赖：Go 1.22+、Node.js 18+、npm
chmod +x run.sh
./run.sh start        # 或 make start
```

| 地址 | 说明 |
|---|---|
| http://localhost:3000 | 前端（Vite，`/api` 代理到后端） |
| http://localhost:8080 | 后端 API + 生产静态托管 |
| http://localhost:8080/api/health | 健康检查 |

```bash
./run.sh stop         # 停止
./run.sh restart      # 重启
./run.sh status       # 状态
./run.sh backend      # 仅后端
./run.sh frontend     # 仅前端
./run.sh build        # 生产构建 → bin/my-icons + frontend/dist
```

### 生产单进程

```bash
./run.sh build
MYICONS_STATIC_DIR=frontend/dist MYICONS_DATA_DIR=data ./bin/my-icons
# → http://localhost:8080
```

### Docker

```bash
docker build -t my-icons .
docker run -p 8080:8080 -v myicons-data:/app/data my-icons
```

## 后端 API

| 方法 | 路径 | 说明 |
|---|---|---|
| GET | `/api/health` | 健康检查 |
| GET | `/api/icons` | 全量图标清单（含上传） |
| GET | `/api/categories` | 分类统计（与 icons 同源） |
| POST | `/api/icons/upload` | 上传 SVG（multipart） |
| DELETE | `/api/icons/<cat>/<name>` | 删除**上传**图标（内置 403） |
| GET/POST/DELETE | `/api/favorites[/<slug>]` | 收藏同步 |
| GET/POST/DELETE | `/api/recents[/<slug>]` | 最近使用 |

环境变量：

| 变量 | 默认 | 说明 |
|---|---|---|
| `MYICONS_ADDR` | `:8080` | 监听地址 |
| `MYICONS_DATA_DIR` | `./data` 或 `../data` | SQLite + 上传目录 |
| `MYICONS_STATIC_DIR` | 自动探测 | 前端 dist 或 public |

## 添加图标

1. **网页上传**：打开 `/upload`，拖入 SVG，立即入库并写入 `data/icons/`。
2. **构建管线**：SVG 放入 `frontend/icons/<分类>/`，执行：

```bash
cd frontend && npm run icons   # 或 make icons
```

3. **批量扩充（云 / 服务器 / 中间件）**：从 Simple Icons / Devicon / VectorLogo.zone 抓取精选清单：

```bash
cd frontend
npm run icons:fetch    # 下载缺失 SVG → icons/
npm run icons          # 生成 icons.json + public/icons/
# 或一步：npm run icons:expand
```

清单在 `frontend/scripts/fetch-icons.mjs` 的 `CATALOG` 中维护；可按需加 slug 后重跑。

再重新构建 / 重启后端以导入种子数据。

## 功能要点

- 即时模糊搜索（名称 / 别名 / 中文关键词）+ 分类 Tab
- 详情弹层：大预览、棋盘格、浅色/深色底
- 在线定制：颜色、尺寸 16–512px、内边距
- 多格式下载：SVG / PNG / Data URI
- 一键复制：SVG、React JSX、CSS、img、CDN
- 收藏 / 最近使用（API + localStorage 回退）

## 许可

代码自有；图标版权归原作者（devicon MIT、simple-icons CC0、自定义图标归你）。