vscode-material-icon-theme 是一个有着广泛受众的vscode插件，用户可以给文件、目录设计图标，对属于vscode美化工具，我经常用这个工具区分架构，可以帮助理解目录结构。
不过每次我想找图标，都要去官方的仓库查看有哪些图标、对应的名称是什么，很麻烦，就开发了一个前端项目，托管在了vercel，方便随时打开搜索图标，这就是为什么开发vscode-material-icon-preview的原因。
一个简单的项目，也打磨了一些细节：
- 根据用户时区判断明暗主题（用户手动设置后将不会再干预切换）
- 基于cookie的主题色ssr
- 用tanstack virtual高性能渲染大量dom节点
- 封装了img标签，加了缓存机制，防止多次发起网络请求读取svg
- 写了generator.ts构建脚本，在构建时获取svg的元信息，存到public下，每次push项目都会自动触发同步原仓库的图标更新
- 从svg里提取了HEX、RGB颜色，方便在前端计算颜色范围，实现了一个color filter，体验非常丝滑
- 图标的明暗版本切换。有的图标是有明暗版本的，在vscode中会自动切换，对于这些图标鼠标hover到图标上可以进行明暗版本切换预览
这个项目也踩到了一些坑，我本想把head做成Apple Liquid Glass的样子，但是死活都不能实现半透明，最后发现是因为我head样式无法感知到下层tanstack virtual内的图标，只能是在virtual内部做一个head，感觉会混乱职责，遂放弃。