Subway 图标自定义指南：源文件编辑与颜色调整实战

Subway 图标自定义指南：源文件编辑与颜色调整实战

Subway 是一套主打像素级完美的开源图标库，覆盖了 iOS、Apple Watch、Windows 等多个平台，一共包含 306 个图标。如果你想在应用里用上这套风格统一的图标，但又不想直接用默认配色，那这篇教程能帮你搞定从源文件修改到最终导出的全流程。

环境准备

先把项目拉取到本地环境，这是动手的第一步。虽然具体仓库地址可能随时间变化，但通常都能在官方主页找到克隆链接。

git clone <repository_url>

拉下来后你会发现它提供了多种格式的源文件，方便不同习惯的设计师使用：

• Adobe Illustrator：矢量编辑首选，无损缩放，适合精细调整。
• Adobe Photoshop：适合处理像素级细节和特效。
• Sketch：iOS/macOS 设计师的常用工具。
• SVG：文本格式，适合快速改色或集成到前端代码中。

选择合适的工具

别纠结，选你最顺手的就行。

如果是做矢量图，AI 是主力。主文件和 iOS7 风格版本都有对应的 .ai 文件。要是你更习惯 PS，里面也有针对不同尺寸的模板，比如 60x60 Retina 规格。对于 Sketch 用户，直接打开对应的 .sketch 文件即可。

这里有个小建议：如果只是想换个颜色，其实不用开大型软件，直接看 SVG 文件往往更快。

基础颜色调整

方案一：在 Illustrator 里改

1. 打开对应的 .ai 源文件。
2. 在图层面板里选中要改的那个图标组。
3. 用选择工具点中图形，然后在'颜色'面板里调填充色和描边色。
4. 改完存成新的 SVG 或者导出图片。

方案二：直接编辑 SVG

很多前端同学喜欢这样操作，简单粗暴。

1. 找到 SVG/ 目录下的目标文件。
2. 用文本编辑器（比如 VS Code）打开。
3. 搜索 fill 和 stroke 属性，把颜色值改成你想要的十六进制码。
4. 保存后直接在浏览器预览效果。

进阶：修改图标形状

如果觉得默认形状不够独特，想动刀改路径，那就得用到 AI 或 Sketch 了。

1. 打开源文件，用钢笔工具或形状工具调整路径节点。
2. 注意保持网格对齐，Subway 的设计初衷就是像素完美，别改歪了。
3. 改完后记得在不同尺寸下测试显示效果，确保边缘清晰。

这玩意儿是模块化设计的，每个图标都基于网格系统，只要不破坏结构，怎么改都能保证清晰度。

导出与应用

改好了别急着扔进项目，得按平台规范来。

• iOS 平台：分非 Retina 和 Retina 两种，还有专门的 iOS7 风格文件夹。
• Windows 平台：对应 Windows 8 和 Phone 7 & 8 的尺寸要求。
• BlackBerry 平台：也有独立的适配路径。

避坑建议

最后唠叨两句经验之谈：

• 风格统一：别混着用，一套图标就要一种设计语言。
• 背景适配：深色背景配浅色图标，反之亦然。
• 优先 SVG：尽量用矢量格式，缩放不模糊。
• 多端测试：不同分辨率下看看会不会糊边。