iconfont to svg

图标的使用，之前的技术方案，一般都是使用特殊的字体文件进行的。而现在随着浏览器支持的变化，越来越多的技术方案开始迁移到直接使用 SVG 图标了。

当然，为了迁移的平滑进行，最好是可以尽可能的避免改动。在 CSS 层面上，一般针对图标有两个需要设置的部分，一个是颜色，一个是大小。

对于颜色，字体文件使用 color 属性进行着色。SVG 中可以用 fill 着色，用 stroke 描边。不过，由于 SVG 图标一般都是一个或多个 path 组成的，实际一般使用 fill 属性就可以了。这里，可以通过 CSS 中的 currentColor 来完成从 color 到 fill 的映射关系：

.icon {
  fill: currentColor;
}

其中，currentColor 的支持浏览器可以参考 caniuse。总体上来说，IE 9+ 都是支持的，是一个不需要有太多顾虑就可以使用的功能。

对于大小，字体文件使用 font-size 属性控制大小。SVG 中则使用 width 和 height 进行控制。这里可以取巧的对所有 SVG 图标统一设置一个如下的 CSS 样式，一步将大小的设置迁移过来：

.icon {
  width: 1em;
  height: 1em;
}

上面的方案可以解决大部分的大小问题，但是要警惕部分字体图标也设置了 width 和 height 的情况。这种时候，图标占的空间由 width 和 height 确定，但是实际图标的大小由 font-size 确定。相当于 SVG 图标外面加上了一圈 pending。实际在迁移的时候，也可以用这个方案，将 width 和 height 改成和原先 font-size 一样的值，其中变化的差值部分用 pending 补上。