在做前端项目时,往往需要导入图片资源,有些常用图标在以前可能就导入过,但很难记起导入到哪个文件夹以及图标名称是什么。通过这个工具,可以帮你快速检索出已有资源
Icon Finder
🌐 在线访问: iconfinder.vercel.app
一个基于图像相似度搜索的图标/图片查找工具,支持形状、颜色的智能匹配,可以帮助你在大量图片中快速找到相似的图片。
好用的话可以给github仓库点个star噢 Github: github.com/hofens/icon…
主要功能
1. 图片搜索
- 支持拖拽或选择图片文件进行搜索
- 基于颜色和形状的相似度计算
- 实时预览搜索结果
- 可调节相似度阈值进行结果筛选
- 支持按目录筛选搜索结果
- 支持主流图片格式:JPG、JPEG、PNG、GIF、BMP、WebP、SVG
2. 目录管理
- 浏览并选择要搜索的目录
- 自动扫描目录中的所有图片文件
- 支持包含/排除路径的正则表达式过滤
- 缓存目录结构,提高后续搜索速度
3. 图片缓存
- 自动缓存图片特征,加快搜索速度
- 支持重建缓存功能
- 显示缓存构建进度
- 智能检测缓存状态,避免重复处理
4. 结果展示
- 网格式展示搜索结果
- 显示图片预览、文件名和相似度
- 支持查看详细的图片信息(尺寸、大小等)
- 可选显示颜色相似度和形状相似度详情
- 支持图片预览放大查看
5. 其他特性
- 支持中英文界面切换
- 自动保存用户设置和偏好
- 支持深色/浅色主题(跟随系统)
- 文件拖放操作支持
- 双击复制文件名功能
使用方法
-
选择目录
- 点击"浏览"按钮选择要搜索的图片目录
- 首次选择目录时会自动构建图片特征缓存
- 可以在设置中配置目录过滤规则
-
搜索图片
- 将图片拖入上传区域,或点击"选择文件"
- 等待搜索完成,结果会按相似度排序显示
- 使用相似度滑块调整匹配精度
- 使用目录下拉框筛选特定目录的结果
-
查看结果
- 点击图片查看详细信息
- 在设置中开启"显示详细相似度信息"可查看更多信息
- 点击预览图可放大查看
- 双击文件名可复制
-
设置选项
- 语言切换:支持中文和英文界面
- 包含路径:设置要包含的文件路径规则
- 排除路径:设置要排除的文件路径规则
- 详细信息:开启/关闭相似度详细信息显示
技术特性
- 使用 Sharp 库进行高效的图片处理
- 实现了基于颜色直方图和形状特征的相似度计算
- 采用多级缓存策略提高性能
- 支持大规模图片库的高效搜索
- 使用 Electron IPC 通信实现前后端分离
- 算法说明见 README_ALGORITHM.md
安装和运行
开发环境
# 安装依赖
npm install
# 启动开发服务器
npm start
# 针对特定平台打包
npm run build:mac # macOS
npm run build:win # Windows