为什么图标命名不能随便来
在做前端开发或者UI设计时，图标的使用频率非常高。从首页的导航栏到设置页面的小按钮，几乎每个功能都离不开图标。可很多人图省事，随手把下载的图标命名为 icon1.png、new_icon.svg 这类名字，结果项目一变大，自己都搞不清哪个是哪个。
我见过一个真实案例：一个团队维护的后台系统，图标文件夹里有 200 多个文件，全是类似 home1.svg、home_copy_2.svg、final_icon.svg 这种名字。新人接手后花了一整天才理清楚哪些图标对应哪些功能。这种混乱不仅浪费时间，还容易出错。
命名的核心原则：见名知意 + 结构清晰
定图标命名规范不是为了“看起来专业”，而是为了让团队协作更顺畅。命名要让人一眼就知道这个图标是干什么的，用在什么地方。
比如用 user-profile 表示用户头像图标，用 settings-gear 表示设置齿轮，比单纯的 gear 或 icon-3 强太多。再加上一定的结构，比如模块前缀、状态后缀，就能形成一套可扩展的体系。
推荐的命名格式
可以采用“模块-功能-状态”的三级结构，全部使用小写字母，用连字符 - 分隔：
button-add-normal.svg
button-add-hover.svg
nav-home-active.svg
nav-message-unread.svg
form-close-icon.svg这样命名后，文件在资源管理器里也能按字母顺序自动归类。比如所有 nav 开头的都在一起，所有 button 开头的排成一组，查找起来非常方便。
结合项目实际调整规则
并不是所有项目都需要这么细的分级。如果是小型个人项目，可以用“功能-类型”两段式：
search-icon.svg
delete-btn.svg
download-link.svg而大型中后台系统，可能还需要加入主题或尺寸信息：
admin-user-edit-dark-24px.svg
admin-user-edit-light-16px.svg关键是团队内部统一，一旦定好就别随意打破。
和设计师对齐很重要
很多团队的问题出在设计稿里的图标名称和开发落地时不一致。建议在项目初期就让设计师也按命名规范导出资源，比如在 Figma 或 Sketch 中给图标组件打上对应的名字，避免开发时还得一个个问“这个叫什么？”
有些团队还会建一个简单的图标文档，列出所有图标名称、用途和预览图，放在 Wiki 或共享文档里，新人一看就懂。
自动化工具能帮大忙
当图标数量多了以后，手动管理容易出错。可以用脚本扫描图标目录，自动生成图标字体或 SVG 雪碧图，同时输出一份 JSON 映射表：
{
"user-profile": "user-profile.svg",
"settings-gear": "settings-gear.svg",
"logout-btn": "logout-btn.svg"
}前端通过这个映射表调用图标，既减少拼写错误，也方便后续替换或批量更新。
图标命名看着是小事，但直接影响项目的可维护性。花半小时定好规范，能省下后续几十小时的排查时间。别等到文件堆成山才后悔当初没好好起名字。