关于为了解决 Unraid 系统没有图标，一气之下开发图标库这件事

Hello 大家好，我是 David

订阅我的频道 ，分享更多 NAS 教程和资讯 ~

My Icon：

一款开源的极简图标库，可以为用户提供在线图标链接，支持文件管理功能。

开源地址：

https://gitee.com/heizicao/my-icon

安装

Docker Compose

services: myicon: image: heizicao/myicon:latest container_name: myicon volumes: - /vol1/1000/docker/myicon/configData:/app/public/configData ports: - 3000:3000 restart: always

参数说明

/app/public/configData：存放配置数据（映射路径必须为空）

使用

浏览器中输入 http://NAS的IP:3000 就能看到界面

如果启动是这样，说明映射配置路径有文件，建议单独给一个空文件夹

鼠标悬停图标上面，点击就可复制该图标的链接

点击下拉框，图标会分类显示

如果想要快速找到想要图标，直接搜索也是没问题的

右上角，点击进入编辑

可以自由添加分类文件夹

TIP：

目前上传图片大小是有限制的，要小于 1M。

上传文件夹图标，填写文件夹名称即可

这样就新增成功了，还可以对其进行编辑

修改信息和删除都是没问题的

点击图标添加按钮

可以上传图标到图库，目前只支持单个上传

注意命名规范

- 分类文件夹：索引 + “_” + 文件夹名称

- 文件夹图标：Cover.png

批量上传图标，来到映射 /app/public/configData/icon 路径，就可以看到上传的图标了，可以直接进行操作

添加成功后，也可以对起进行编辑和删除操作

再次点击编辑按钮，退出编辑

右上角，点击设置按钮

提供背景图片个性化设置

文本也是可以方便自由修改的

更多详情，可以看到关于本项目的一些信息介绍

更新日志，属于是佛系更新了

微信公众号，这个就是每天发教程的 David 本人写的

扩展

本项目完全开源，在对其进行二次开发并封装时，必须明确标注原始项目的开源地址，同时开发所产生的代码也应当遵循开源原则。下面只是简单记录流程，有兴趣的可以看看。

my-icon 项目

这里包含了项目开发的所有代码，包括要用到的图标库数据

项目采用 Vue3 前端界面 + Express 应用框架

版本情况：node（v21.6.2）、npm（10.2.4）、vue（@vue/cli 5.0.8）

TIP：这里就不说要怎么初始项目和需要安装什么插件

启动 Express 作为后端服务，默认运行端口为 4000

npm run server

启动 Vue 前端页面

npm run serve

启动后的界面可能是这样的，那是因为没有修改对接的 Express 端口

修改通信端口（单独在 Express 运行用上面的，Vue 里直接运行用指定的）

这样就可以正常运行了

前端项目打包

npm run build

express 项目

可以进行测试，主要用于打包为镜像

目录 public 用于存放前端项目打包的文件

目录 routes 的 index.js 为接口逻辑代码（可通过 Vue 里的 server.js 修改获得）

启动项目，默认端口号为 3000

npm run start

可以正常运行了

打包构建镜像

使用 Dockerfile 文件进行打包构建，这里有个前提条件是系统要有 Docker 环境，这里以 Unraid 作为演示

这里是打包成镜像的文件，需要包含 Dockerfile 文件

打开 Dockerfile 文件，可以看到是以 node 镜像为基础的

打开终端

TIP：

避免网络问题一直卡住，可以先把拉取 node 下来（其实后面运行打包也会自动下载的，不过是先下载）

docker pull node:21.6.2-slim

进入到需要构建镜像的文件夹中

cd /mnt/user/appdata/express

进行构建镜像（报错不是什么大问题可以忽略）

docker build -t myicon .

打包完成镜像后，就可创建容器了

docker run -d --name myicon -p 3000:3000 -v /mnt/user/appdata/myicon:/app/public/configData myicon:latest

上传 Dockerhub

首先需要注册 Dockerhub 账号（可以用 Github 登录）

docker hub 帐号在本地验证登陆

docker login

获取 CONTAINER ID

docker ps -a

将容器 commit 成镜像

docker commit CONTAINER_ID heizicao/myicon:latest

将镜像推送到 docker hub 的仓库

docker push heizicao/myicon:latest

命令验证

docker inspect heizicao/myicon:latest

总结

为什么要做这个图标库，那就不得不提 Unraid 了。Unraid 系统里部署 Docker 应用是可以设置图标链接的，但常常会找不到对应的 Docker 图标，所以就写了这个图标库。说实话这个可以设置图标，值得所有其他 NAS 系统学习，用过就知道真的很方便。

目前项目还是不太完善的，比如不能上传太大的文件，个性化设置项还不够多，少了深色主题等等。对于更新，每天上班都是敲代码，只能说佛系更新，目前项目已经开源你行你上。

综合推荐：⭐⭐⭐⭐（别问为什么）

使用体验：⭐⭐⭐⭐（有很大提升空间）

部署难易：⭐⭐（简单）︎