假设您正在开发一个使用图标系统的网站。 许多参与网站工作的人员都会与图标系统互动。 设计师会创建新的图标，调整现有的图标，并提出对图标功能的想法。 开发人员则使用该系统构建网站的页面。
假设您是前端开发人员。 您正在实施此系统。 您是这个系统的创建者和使用者。
您会向设计师提出什么要求呢？
选项 1) “请严格按照这些要求做。”
例如：
在 Illustrator 中，将您的图标设计为黑色，并放置在 100×100 的画板上。 使用以下选项将文件保存到名为“icon-NAME.svg”的特定文件夹中。 确保在 Illustrator 中先进行优化，例如合并路径和减少点。 新图标准备就绪后，从项目根目录运行 `gulp svgstore`，这将为生产环境准备图标。 对与新图标相关的项目进行的提交应与其他内容分开，例如等等，您应该明白我的意思。
选项 2) “请遵循这些基本原则。”
例如：
我们网站上的图标都是单色正方形。 我们在 Dropbox 中有一个文件夹来存放原始文件。 如果您有新的图标或更改了旧图标，请在该文件夹中进行操作并通知我。
选项 3) “您给我什么，我就用什么，我会处理好一切。”
例如：
如果可以，请使用矢量图，否则请以您最习惯的方式制作，我会让它适应我们的系统。
您是否遇到过类似的情况？ 您是如何协调团队的？
我是公司唯一的图标设计师。 领导通常会像您的选项 #3 一样要求图标，但是当我交付图标时，他们会责怪我没有读懂他们的心思，没有做 XYZ。 有一次，因为我不知道应用程序无法使用 ICO，而只能接受带有品红色背景的 BMP 以实现透明度，尽管我事先多次询问过，但我还是被训斥了一顿。 我认为问题的根源在于我从未与实际实施 ICO 的开发人员进行过交流。
对于我们来说，它结合了选项 1 和选项 2，我们有一套图标和导出规则，但我们只需要设计师将它们放到文件夹中并通知我们，所有进一步的优化和推送到生产环境以及版本控制都由前端人员处理。
我们对所有图标使用 gulp 和 svg 精灵，所以这有点像以上选项的组合。
您想要/需要的任何尺寸、形状和颜色。
当您导出它们时，请遵循一些简单的指南，但确保它们被称为“图标”（Illustrator 会在“文件”名称后面添加您的画板名称（例如 icons_home.svg）。
从那里开始，作为 FE 开发人员，我会拾取这些图标并将它们放入我的精灵文件夹中使用。 如果图标大小发生变化，CSS 会更新。
（对于任何感兴趣的人，我们使用 gulp svg 精灵 来编译我们的 SVG 精灵。）
我倾向于选择 **选项 3**，因为我认为这是我的工作。 让设计师以他们最舒适的方式在他们的世界中工作。 我会做我的工作，在我的世界中。
尽管有很多事情可能会将情况推向 #2 或 #1 的领域。 例如，设计师希望有特定的指南和工作流程。 例如，团队规模足够大，需要指南以避免脱轨。 例如，发生了一些事件（如 Jon 上述描述的那样），导致预期不一致，从而给人们带来麻烦。
我对图标的处理方式会根据它们的用途而变化。 我通常会使用我认为是“实用”的图标集：比如 FontAwesome 的图标，在整个网站中使用，用于交互图标（比如移动导航的汉堡菜单图标）或社交图标。
对于实用图标，我使用 IcoMoon 来检查尺寸并生成精灵。（顺便说一下，我通常会清除多余的水平空间——否则，当将它们水平排列时，边距/填充通常会发生偏移。）使用 IcoMoon，查找和添加新图标非常简单。
我对复杂图标的处理方式不同。 这些图标用于显示或描述性目的； 在这些地方，单层火箭图标是无法满足需求的。
我认为，我会将这些图标保存在与实用图标精灵分开的单独精灵中，尤其是在涉及复杂的悬停/交互效果时。 这确实要求我在 Illustrator 中花费更多时间，是的，但图标的复杂性也需要这样做。
通常是 **选项 3**。 但是，如果他们没有完全使用矢量图，我会提醒他们使用更高分辨率的格式，这样他们会考虑到 **高 DPI 显示屏**。 否则就随心所欲吧。
＃3 是混乱的，坦率地说，是垃圾。 我知道这很苛刻，但在我几次在这种环境中工作时，它很快变得有毒。 任何在团队中工作的人员都应该有一些团队工作指南，无论这些指南多么详细或简略。 它可能在非常小的范围内有效，但这更多地是意外的惊喜，而不是经过深思熟虑的系统。
想象一下，一个工程师进来，说他想用不同的语言进行编码，并使用不同的版本控制系统来管理代码，因为“这是他最擅长的，最舒服的方式”。 不，这不是一个选项。 这也是团队实施代码规范的原因：一致性往往比一个人使用不同方式获得的收益更有价值。
＃1 和＃2 都是指南，只是它们在严格程度上有所不同。 这种严格程度应该由特定团队决定，但是作为团队，如果没有任何工作指南？ 那可是无政府状态。
我非科学的、完全是轶事性的观察是，我们大多数客户在 Cloud Four 都属于选项 1 或 2 的阵营。 但我认为我们作为一家代理机构更倾向于选项 2 或 3。
最终，只有两件事很重要：图标的设计是否良好（可读、可缩放、和谐）以及它是否以最大程度地重复使用的方式实施，并且不会导致任何不必要的文件大小。 只要这两个条件得到满足，您使用什么应用程序、格式或流程来实现就不重要了。
我们坚持使用＃2。 ＃3 是一团糟，而＃1 对于设计师来说是不可取的（他们的工作不是运行构建任务或提交到 VCS）。
我处于 1 和 2 之间。 设计师应该优化他们的资源（删除重复的点等），因为这是他们工具集的核心部分。 否则，开发者通常需要解释设计师的意图。 我更多地从事前端开发工作，而不是视觉设计，但我可以自信地说，对诸如构图大小和颜色的约束有利于创造过程。
我们在设计师方面以最小的努力遵循了选项 1——基本上是“以这些确切的设置、这种确切的画板大小导出您的 SVG，然后将文件交给我们”。 我确实告诉设计师，如果他们合并路径，从长远来看会更好，但没有要求他们这样做。 我还要求他们使用单色，但不是特指黑色。 我们将技术细节保持在最低限度。
从那里开始，我会手动清理 SVG 代码——Adobe Illustrator 倾向于添加许多额外的东西。 确保删除所有颜色。 确保所有内容都处于正方形空间中。 确保 SVG 标记上的 ID 属性与文件名匹配。 有时我会发现一些未对齐的东西，因此我会与设计师进行沟通，并手动对齐它们。 我确信许多流程可以自动化，但我没有时间花精力在上面（图标很少更改，因此自动化并不会节省太多时间）。 之后，它会进入使用 grunt 和 svgstore 任务的代码库中。
如果需要使用多色或非方形的图标，我们会将其称为“符号”而不是图标，它们遵循不同的规则。图标可以以简单、标准的方式以编程方式更改其颜色。图标可以相当容易地彼此并排显示，并且缩放以标准统一的方式工作，以支持不同大小的按钮。我对符号的 SVG 文件并没有进行太多预处理，基本上只是在 SVG 元素上添加了一个 ID 属性。在极少数情况下需要在按钮内使用符号时，将其视为一次性操作就足够了，同时仍能享受标准图标实现带来的好处。
将 SVG 图像类型指定为“图标”与“符号”为我们解决了许多问题。
我认为 SVGOMG 是你需要的。简化路径，删除不必要的元素。上次我使用它时，它删除了 Illustrator SVG 的 97%，而没有任何视觉差异。
在 WGU 的 UI 团队中，我们真的在努力实现一个完全自动化的前端框架，我们可以将其构建到一个活生生的样式指南中，因此我们要求设计师提供选项 1。我们必须将这些图标通过一个自动的 Illustrator 脚本进行转换，将其转换为精灵图，然后通过一个 Grunt 进程从这些精灵图生成 SASS 和 Base64 字符串。
文件名、画板、SVG 的结构……所有这些都需要正确，而且我们已经经历了重大的品牌重塑，现在我们有数十个图标，而且还在不断增加。设计师必须参与进来。
另外，我不会使用 AI，因此他们以模板方式进行操作更快！
以下是我们的做法
每个图标都是 Sketch 文件中的一个画板，名称类似于 myicon-24（24 表示大小）。
就是这样，真的。
一个 Gulp 任务
将所有画板导出为 SVG
使用 (svgo) 清理
一个符号文件将被创建，其中每个图标都以“icon”为前缀
生成的符号 SVG 文件将根据创建它的文件命名
文件名和文件都将推送到 Git
现在，
符号文件要么被转储到 HTML 中，如果浏览器不支持使用外部符号，要么直接引用符号，例如 assets/icons-6373737.svg#icon-myicon-24。
开发人员实际上并不关心或关心发生了什么，因为一个 React 组件或一个 Icon PHP 函数会处理这些问题。
这可能看起来很复杂，但实际上非常简单，而且是即时的。
由于屏幕设计师和我们前端开发人员是同一个部门的两个团队，我们讨论了图标工作流程应该如何运作，评估了在我们公司将图标包含到页面中的不同方式（SPA 的内联 SVG 和普通页面的背景图像），尝试了一些方法，丢弃了一些方法，并将几种方法整合到适合我们的方法中。基本上，是 #1，但这不是只有我们自己要求某些格式。自动转换很危险，因为它很容易搞砸亚像素渲染的质量。
我为一家大型金融机构工作。它更接近 #1 而不是 #2 或 #3。我们有非常严格的指南，任何引入的新图标都可能需要团队批准。
我认为在理想情况下，设计师应该确切地知道如何以正确格式、一致性并针对性能和颜色要求进行优化来为 Web 设计图标。Web 也是他们的媒介，不应该存在一个单独的“世界”。在 Photoshop 中创建静态图像并将其扔过墙的日子应该结束了。
然而我知道他们并非如此，并非所有地方都如此。因此在实践中，我会以选项 1 为目标，尽可能提前具体说明。另一个有帮助的措施是公开的图标演示页面，其中在网格中显示图标。如果有什么不对劲，你应该能够快速地看到它。最普遍的问题之一是图标无法正确对齐。
我是一名设计师，也是一名前端开发人员，因此我看到了（并且经历过）围栏两侧的问题，也就是说，我认为理解这里存在两个截然不同的观点至关重要，从设计的角度来看，图标应该是 一致的（配色方案、描边粗细、大小、样式等），但这些约束与开发约束无关。我很难从开发的角度找到很多论据，使用 SVG 和 Gulp 等构建工具，应该很容易处理各种形状和大小（这实际上是你需要担心的一切）。
制作像样的图标很痛苦，它们比你预期的要花更长的时间，然后你必须花时间手动提示路径，以便点落在精确的像素上——没有什么比花费所有时间和精力却让前端开发人员使用 Font Awesome 更令人沮丧了！
这里选择 #1。
（团队有 3 名设计师、3 名前端开发人员、4 名后端开发人员）
不仅如此，我们的设计师已经在 GitHub 上的正确文件夹中提交了图标（使用新的拖放式上传器）。
最终，某些东西会出问题。文件名错误或未优化的图标被提交。但我们更愿意修复零星的问题，而不是阻止所有人的工作。
一些设计师应该遵循的基本原则，然后是针对我可以做的一切的强大自动化 :-)
尝试选项 1。尝试选项 1。尝试选项 1。尝试选项 1。尝试选项 2。好的……选择选项 3。
我和我的团队使用 Sprite CSS Generator 和 Adobe Illustrator。这是一个很小的工具，我们可以将精灵图保存为 Illustrator 文件，并且不会丢失任何信息。我们还可以重新排列图标，代码会更新正确的位置。它很好，而且免费：http://spritecssgenerator.formfcw.com
我们的设计师从来不听我们告诉他的话！他做他想做的事情！！图标的颜色、大小各不相同，当然，你永远不能指望他给你一张精灵图：“他太忙了，没时间做这个！”！！