虽然主修 Java,但做校园项目时仍需要一套统一的图标。为了不在矢量软件里“画到秃头”,我长期维护一个图标资源清单,下面挑 8 个常用库分享给大家。
1. Lucide
- 类型:线性风格,1600+ 图标。
- 使用场景:在 Astro、React 项目中直接按需引入,支持自定义描边。
2. Remix Icon
- 特点:语义覆盖全面,提供 Figma 文件。
- 做法:在校园项目里配合 Tailwind,很容易保持统一风格。
3. Heroicons
- 来源:Tailwind 团队维护,Outline/Solid/Mini 多种尺寸。
- 经验:后台管理系统直接选 Solid 版,阅读性最好。
4. Iconsax
- 亮点:多风格切换,适合需要品牌感的页面。
- 技巧:把色彩映射成 CSS 变量,方便暗色模式适配。
5. QingIcon
- 国产宝藏:Asorn & 胡蝶维护,附带插画库。
- 适合:政务与 B 端项目,线条规整。
6. Circum Icons
- 特点:圆环外形识别度高,适合导航或流程步骤。
7. Iconoir
- 优点:React/Vue/Flutter 全覆盖,品牌图标完善。
8. Doodle Icons
- 风格:手绘式,适合校园活动或内容页的小插画。
如何在项目中管理图标
- 统一出口:在前端创建
icons.ts,所有图标都从这里导出,方便替换。 - 命名规范:按照业务语义(如
IconOrder,IconSchedule),别直接用资源名。 - 配色策略:用
currentColor,结合主题色或 CSS 变量,省去重复修改。
如果你也有好用的资源库,欢迎回复告诉我;我会继续把它们整理到 GitHub(github.com/1lck)的资料区里。