使用简单CSS操作SVG图标

本文是由三部分组成的系列文章的第二篇，该系列文章将展示Iconic将提供的新的图像学方法。

---

用CSS样式图标

智能图标引起了人们的极大兴趣，但样式可能是每天最有用的功能。 图标集涵盖了广泛的不同主题，但以单一视觉样式呈现。 如果不是最佳的话，这通常是适当的。 但是，在许多情况下，特定的图标可以并且应该具有特定的样式（颜色，笔触宽度或其他属性）。

静态图片无法进行样式设置（除非您针对每种特定的美感输出文件）。 图标字体通过允许简单的样式使我们更接近，但它不是细粒度的-意味着如果将图标涂成红色，则整个图标将是红色。 使用SVG，可以自由设置图标中各个元素的样式，从而开辟了全新的可能性。

---

一个图标，无限的可能性

SVG和CSS的结合是神奇的。 图像可以呈现完全不同的外观，经过定制的处理以及有趣的交互式过渡。 SVG标记提供对其中包含的所有元素的访问和控制。 这意味着可以使用CSS对灯泡图标进行“点亮”，可以对对比度图标进行样式设置以反映特定的对比度，而信号灯图标可以传达go信息 。 能够在元素级别进行样式设计为图标注入了新的活力-它们可以是真正独特的 。

---

图标主题

使用CSS对图标进行样式设置的下一个逻辑步骤是创建范围广泛的主题，以实现一致的美观。 我们对Iconic的关注重点之一就是揭露和应对围绕图标主题的挑战。 通常，设置一组图标的样式（除了简单地更改颜色之外）是一项艰巨的任务，它依赖于具有源矢量文件。 没有它们吗？ 好吧，你不走运。

SVG图标可以解决此问题。 我之所以说“可以”，是因为很难始终如一地构造整个SVG图标集。 图标的设计和构建必须考虑主题，以使样式在整个集合中保持一致。 但是，当它起作用时，它看起来很棒。

我们整理了一个演示来展示图标主题。 它向您显示了将CSS规则应用于整个图标集时可以完成多少工作。

玩我们的图标主题演示。

---

有趣的用例

图标样式