Docker 部署 hd-icons 高清图标库 🐳
📋 目录导航
🎯 项目简介
hd-icons 是一个功能强大的高清图标库项目，致力于为开发者和设计师提供高质量、多样化的图标资源。该项目基于现代化的 Web 技术栈构建，支持 Docker 容器化部署，让图标管理和使用变得更加简单高效。
无论你是前端开发者需要界面图标，还是设计师寻找灵感素材，hd-icons 都能满足你的需求，让你的项目界面更加专业和美观。
🛠️ 核心特性
🎨 图标资源丰富
- 海量图标库：收录数千个高质量图标，涵盖多种设计风格
- 多格式支持：提供 SVG、PNG 等多种格式，满足不同场景需求
- 分类清晰：按功能、风格、行业等多维度分类，快速定位所需图标
🔍 智能搜索体验
- 关键词搜索：支持中英文关键词快速搜索，精准匹配
- 模糊搜索：智能容错，即使拼写错误也能找到相关图标
- 分类筛选：按颜色、风格、尺寸等多条件筛选，提高查找效率
⚡ 高性能架构
- 快速响应：优化的搜索算法，毫秒级图标检索
- 缓存机制：智能缓存热门图标，提升访问速度
- CDN 就绪：支持 CDN 加速，全球访问无压力
🐳 容器化部署
- 一键部署：Docker Compose 简化部署流程
- 环境隔离：独立的容器环境，避免依赖冲突
- 易于扩展：支持水平扩展，应对高并发场景
🎯 开发者友好
- API 支持：提供 RESTful API，方便集成到其他系统
- 文档完善：详细的部署和使用文档，降低学习成本
- 持续更新：定期更新图标库，保持内容新鲜度
🔒 安全可靠
- 权限控制：支持访问权限管理，保护图标资源
- 数据备份：完善的备份机制，确保数据安全
- 监控告警：集成监控系统，实时掌握服务状态
🐳 一、Docker 部署 hd-Icons
1. 创建部署目录和 docker-compose.yml 文件 📁
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
# 创建部署目录并进入
mkdir -p /vol1/1000/compose/hd-Icons && cd $_
cat > docker-compose.yml <<'EOF'
services:
hd-icons:
image: xushier/hd-icons:latest
container_name: hd-Icons
restart: always
ports:
- "50560:50560"
volumes:
- ./icons:/app/icons
environment:
- TITLE=墨不凡图标库
EOF
|
📝 配置说明：
- 镜像版本：使用官方最新版镜像
xushier/hd-icons:latest
- 容器名称：命名为
hd-Icons，便于识别和管理
- 端口映射：将容器内 50560 端口映射到宿主机相同端口
- 数据持久化：挂载
./icons 目录到容器内，确保图标数据不丢失
- 环境变量：设置站点标题为"墨不凡图标库"
2. 拉取镜像并启动容器 🚀
1
2
3
4
5
6
7
8
|
# 拉取最新镜像并启动服务
docker-compose up -d
# 查看服务状态
docker-compose ps
# 查看启动日志
docker-compose logs -f
|
✅ 验证部署：
1
2
3
4
5
|
# 检查容器运行状态
docker ps | grep hd-Icons
# 测试服务可达性
curl http://localhost:50560
|
🚀 二、使用 hd-Icons
1. 访问 Web 界面 🌐
部署完成后，通过以下方式访问 hd-icons 图标库：
- 🌍 本地访问：
http://localhost:50560
- 🔗 局域网访问：
http://服务器IP:50560
- 🌐 域名访问：
https://icons.yourdomain.com（配置反向代理后）
🖥️ 界面功能区域：
- 顶部导航：搜索框、分类筛选、用户设置
- 侧边栏：图标分类、标签筛选、收藏夹
- 主内容区：图标网格展示、预览面板
2. 图标搜索与下载 🔍
| 操作 |
说明 |
示例 |
| 🔍 关键词搜索 |
在搜索框输入图标相关关键词 |
“搜索”、“用户”、“设置”、“箭头"等 |
| 🏷️ 分类浏览 |
按功能分类浏览图标 |
界面图标、操作图标、文件图标等 |
| 🎨 风格筛选 |
按设计风格筛选 |
线性图标、面性图标、多色图标等 |
| 📥 图标下载 |
下载所需格式的图标 |
SVG、PNG（多种尺寸） |
| ⭐ 收藏功能 |
收藏常用图标 |
创建个人收藏夹，快速访问 |
💡 使用技巧：
- 使用英文关键词搜索通常更准确
- 多尝试同义词，如"delete"和"remove”
- 利用分类筛选快速缩小搜索范围
- 批量下载时选择统一风格保持一致性
🌐 三、Nginx 反向代理配置
访问地址示例：
https://icons.yourdomain.com
1. 创建 Nginx 配置文件 🔧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
# 创建 Nginx 配置文件目录
mkdir -p /etc/nginx/conf.d && \
cat > /etc/nginx/conf.d/hd-icons.conf <<'EOF'
server {
listen 443 ssl;
listen [::]:443 ssl;
http2 on;
server_name icons.yourdomain.com; # 🌐 请替换为您的实际域名
# SSL 证书配置
ssl_certificate /etc/nginx/ssl/cert.pem;
ssl_certificate_key /etc/nginx/ssl/key.pem;
# TLS 安全配置
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
ssl_prefer_server_ciphers off;
# 安全响应头
add_header Strict-Transport-Security "max-age=31536000" always;
add_header X-Content-Type-Options nosniff always;
add_header X-Frame-Options SAMEORIGIN always;
add_header X-XSS-Protection "1; mode=block";
# 反向代理配置
location / {
proxy_pass http://localhost:50560;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# WebSocket 支持（如需要）
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 超时设置
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
# 缓冲区设置
proxy_buffering on;
proxy_buffer_size 4k;
proxy_buffers 8 4k;
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
proxy_pass http://localhost:50560;
expires 1y;
add_header Cache-Control "public, immutable";
}
# 错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
internal;
}
}
EOF
|
2. 测试并重载 Nginx 🔄
1
2
3
4
5
6
7
8
|
# 测试配置文件语法
sudo nginx -t
# 重载 Nginx 配置
sudo systemctl reload nginx
# 查看 Nginx 状态
sudo systemctl status nginx
|
🔧 配置要点：
- 替换
server_name 为你的实际域名
- 确保证书路径正确（或使用 Let’s Encrypt）
- 根据实际需求调整超时时间
- 静态资源缓存提升访问速度
🔧 四、容器维护命令
1. Docker Compose 命令 🐳
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
# 进入项目目录
cd /vol1/1000/compose/hd-Icons
# 📊 查看服务状态
docker-compose ps
# ⏸️ 停止服务
docker-compose down
# 🔄 拉取最新镜像
docker-compose pull
# 🚀 启动服务
docker-compose up -d
# 📝 查看服务日志
docker-compose logs
# 🔍 实时跟踪日志
docker-compose logs -f
# 🛠️ 完整升级流程
docker-compose down && \
docker-compose pull && \
docker-compose up -d && \
docker image prune -f
# 💾 备份数据
tar -czf hd-icons-backup-$(date +%Y%m%d).tar.gz ./icons
|
2. Docker 容器命令 📦
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
# 📋 查看所有容器
docker ps -a
# 🏃 查看运行中容器
docker ps
# ⏹️ 停止容器
docker stop hd-Icons
# ▶️ 启动容器
docker start hd-Icons
# 🔄 重启容器
docker restart hd-Icons
# 🗑️ 删除容器
docker rm hd-Icons
# 🔨 进入容器Shell
docker exec -it hd-Icons sh
# 💻 在容器中执行命令
docker exec hd-Icons ls -la /app
# 📊 查看容器资源使用
docker stats hd-Icons
# 🔍 查看容器详情
docker inspect hd-Icons
## 📝 容器日志管理
docker logs hd-Icons # 查看日志
docker logs -f hd-Icons # 实时跟踪日志
docker logs --tail 100 hd-Icons # 查看最后100行
docker logs -t hd-Icons # 带时间戳的日志
docker logs --since 1h hd-Icons # 查看最近1小时日志
|
3. Docker 镜像管理 📀
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
# 📷 列出所有镜像
docker images
# 🗑️ 删除指定镜像
docker rmi xushier/hd-icons:latest
# 🧹 清理悬空镜像
docker image prune -f
# 🗂️ 清理所有未使用镜像
docker image prune -a -f
# 📥 拉取特定版本镜像
docker pull xushier/hd-icons:1.0.0
# 🏷️ 给镜像打标签
docker tag xushier/hd-icons:latest myregistry/hd-icons:latest
|
🌟 高清图标，设计无忧
通过本文档，你已经成功使用 Docker 部署了 hd-icons 高清图标库，并借助 Nginx 反向代理实现了安全便捷的远程访问。现在，你可以：
🎨 丰富资源 访问海量高质量图标，涵盖多种设计风格和业务场景
🔍 智能搜索 快速定位所需图标，支持关键词、分类、风格多维度筛选
📥 便捷下载 一键下载多种格式图标，满足不同项目需求
⚡ 高效管理 基于容器化架构，轻松维护和扩展图标服务
🌍 全球访问 通过反向代理配置，实现安全快速的远程访问
图标是界面设计的灵魂，好的图标能够提升用户体验和产品质感。hd-icons 为你提供了强大的图标资源支持，无论是：
- 🎯 产品开发：为 Web、移动端应用提供统一风格的图标
- 🎨 设计创作：寻找设计灵感和素材参考
- 🚀 项目原型：快速搭建美观的界面原型
- 📊 报表仪表盘：为数据可视化提供清晰的图标元素
从现在开始，让 hd-icons 成为你的设计助手，提升开发效率，创造更美观的数字产品！🚀
📌 持续关注：建议关注
hd-icons 官方更新
，及时获取新图标和功能优化。
🐛 问题反馈：使用中遇到问题或有建议，可前往
GitHub Issues
提出。
🤝 社区贡献：欢迎提交 Pull Request，共同完善这个优秀的图标库项目。
祝你使用愉快，设计出彩！🎉
