在网站中包含大量图标的最好方法？

Question

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

我一直使用css精灵图像来包含所有这些图标，但在这一点上，由于我必须添加更多的图标，从精灵生成这些图标所涉及的CSS变得非常长，并且精灵图像变得更大。

有没有更好的方法让我把这些图标加入到网站中？我已经考虑过制作图标字体(它们都是简单的单色图标，所以这将是很好的)，但不确定这有多容易更新。我也想过只为图标制作单独的文件，并将其作为图像包含在内。然后还有SVG路由。

根据我需要多少个图标，而且通常会添加更多的图标，你认为包含这些图标的最好方法是什么？

每页最多可能有10个不同的图标，但不幸的是我不能保证它会是10个特定的图标。(就像在中一样，没有特定类型的图标可以组合在一起)。

谢谢!

Answer 1

只是为了给你一些选择，试着看看IcoMoon

这是一个在Chrome中运行的web应用程序，允许你导入自己的SVG来创建自定义图标字体。它需要一些修修补补，但我会说，没有比生成一个精灵工作表更多的东西了。这样你就有了使用图标字体的灵活性，分辨率独立，容易修改颜色等。

@Bojangles的缝线建议看起来很有趣；今天下午我将对其进行修补！如果你用的是Mac，那就是SpriteRight，如果你更喜欢原生应用，它也可以提供类似的功能。