Docker 部署 hd-icons 高清图标库 🐳

📋 目录导航

🎯 项目简介

hd-icons 是一个功能强大的高清图标库项目，致力于为开发者和设计师提供高质量、多样化的图标资源。该项目基于现代化的 Web 技术栈构建，支持 Docker 容器化部署，让图标管理和使用变得更加简单高效。

  • 🐱 GitHub 项目地址：https://github.com/xushier/HD-Icons
  • 🖼️ 项目特色：提供海量高清图标，涵盖多种风格和分类
  • ⚡ 技术架构：采用现代化的前后端分离架构，支持快速搜索和预览
  • 🔧 部署方式：支持 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，共同完善这个优秀的图标库项目。

祝你使用愉快，设计出彩！🎉