从零开始搭项目 - 图标
- SVG or 字体图标？
- 像使用字体图标一样使用SVG图标
- SVG雪碧图
- 维护图标
SVG or 字体图标？
首先，我们先看看两种图标方案在各方面的表现如何：
| 特性 | SVG | 字体图标 |
|---|---|---|
| 使用门槛 | 高 | 低 |
| 多色 | 支持 | 不支持 |
| 渲染效率 | 一般 | 高 |
| 定位 | 易 | 难 |
| 兼容性 | 一般 | 好 |
| 清晰度 | 高 | 可能存在锯齿 |
注：以上对于渲染效率的描述是来自网络上的说法，笔者并没有进行真实的测试。
很显然，在多色这个特性上，SVG是完全胜出的。如果你的项目使用了多色图标或未来会使用到多色图标，那你只能选择SVG方案。
本项目使用了SVG作为图标方案，理由是：
- 可能会使用到多色图标
- 本项目作为解决方案集合，遵从“用新不用旧”的原则
注意
有充分的理由说明，在选择图标方案时，选择一种图标方案，而不是两种混用。 因为两种图标方案其实达到的目的是一致的，混用两种方案，当新增一个图标时，既可以将其加入字体图标库，也可以加入SVG库，这样会给图标库的维护者和使用者造成困扰。
图标的定位是什么？
简单的说，定位就是你是否确切知道图标的尺寸信息。因为字体图标是将图标当成文字处理，当你设置某个字体图标为20px时，你并不能说这个图标的尺寸就是20 x 20，但SVG却可以，因为SVG并没有 font-size 的概念，你需要手动指定它的宽和高。