css - 在网站中包含大量图标的最佳方法？

Question

我正在开发多个属于同一站点的 Web 应用程序。因为这里有几个元素，所以我需要大量的图标，每个图标都有大约 12 种不同的颜色。 (这么多图标的原因是需要特定自定义图标的非常具体的操作)。如果包括所有颜色变化，我正在处理的图标总数很容易达到 400 多个。

我一直在使用 css sprite 图像来包含所有这些图标，但此时我不得不添加更多图标，从 sprite 生成这些图标所涉及的 CSS 变得非常长，并且 sprite 图像变得大很多。

是否有更好的方法将这些图标包含到网站中？我研究过制作图标字体(它们都是简单的单色图标，所以这很好)但不确定更新起来有多容易。我还考虑过为图标制作单独的文件，并将其作为图像包含在内。然后还有 SVG 路线。

根据我需要多少个图标，并且会定期添加更多图标，您认为包含图标的最佳途径是什么？

每页最多可能有 10 个不同的图标，但很遗憾，我不能保证一定是 10 个特定的图标。 (例如，没有我可以组合在一起的特定类型的图标)。

谢谢!

Answer 1

只是为了给您一些选择，请尝试查看 IcoMoon

这是一个在 Chrome 中运行的网络应用程序，允许您导入自己的 SVG 以创建自定义图标字体。它需要一些 修补，但我想说的只是生成 Sprite 表。然后，您可以灵活地使用图标字体；分辨率独立性，易于颜色修改等。

@Bojangles 对 Stitches 的建议看起来很有趣；今天下午我会修补它!如果您使用的是 Mac，则有 SpriteRight ，如果您更喜欢原生应用，它会提供类似的功能。