ElementPlus 组件库 Icon 图标组件为什么从字体图标方案切换到 SVG 图标方案？

Question

ElementPlus Icon 图标组件为什么从字体图标方案切换到 SVG 图标方案，有哪些方面的原因可以介绍一下吗？

Answer 1

几乎所有现代框架都在把图标方案从 Font 变为 SVG。

原因很简单，就俩字：性能。

• SVG 的 Rendering 表现要远优于 Font，图标越多越明显。
• SVG 在 Windows 上抗锯齿能力要优于 Font，在高分屏下尤为明显（当然你也可以说是因为 Windows 抗锯齿拉跨、不能怪 Font）。
• 对于三大框架而言，SVG 可以按需加载；而 Font 由于最后是打包在同一个字体文件的缘故，很难按需裁剪。如果你问为啥不每个图标都单独打包成一个字体、不就能按需加载了么，这就是另一个话题了（可以给你点儿思路，这跟为啥前端需要雪碧图这种东西是一个道理）。
• 对于不是那么复杂的图标来说，SVG 的尺寸要小于 Font，这对 Web 而言很重要。

SVG 还有一些其他的额外优点，比如它支持滤镜、多色等等；这些 Font 都不支持。

当然了，SVG 也不是没有缺点，那就是：在 IE 上兼容性差。（快点儿让 IE 去死吧！）