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

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

原因很简单,就俩字:性能。

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

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

当然了,SVG 也不是没有缺点,那就是:在 IE 上兼容性差。

 

希望大家多多讨论!!

posted @ 2022-01-24 15:12  㭌(mou)七  阅读(443)  评论(0编辑  收藏  举报