unfont

unfont

使用Inline SVG嵌入Font Awesome Icons中的HTML：

• 零运行时JS
• 无需Webpack
• 在页面加载期间立即显示图标
• 高达10倍（–12.5kb），小于SVG + JS核心
• 每个HTML页面只加载它需要的图标
• 流html支持
• 内联样式的选项甚至较小的捆绑包
• 使用任何基于节点的模板。

Font Awesome现在在免费包装中有1600多个图标，将捆绑包推至200k – 很多代码仅使用几个图标。加载也需要一段时间，并且在加载时不会呈现图标。字体Awesome的SVG + JS Core是JS运行时，将Inline SVG <i>替换。聪明，但并非总是欢迎JS的额外40K（13k Gzip），并且在脚本加载过程中仍然会让您的用户丢失图标。

作为轻巧的替代方案，我制作了此软件包，它在HTML生成期间将字体很棒的图标呈现到Inline SVG。它带有Inline SVG的标准权衡（没有缓存），但适用于静态HTML网站，非常适合关键内容。

目录

• 基本用法
• 内联样式模式
• 与标准FA Runtimes进行比较
• 替代设计
• 执照

基本用法

在沙箱中与unfont一起玩（但请不要使用客户端）

安装：

unfont
$ yarn add unfont \”>

$ npm i --save unfont
$ yarn add unfont

将CSS导入您的样式捆绑包（它只是从@fortawesome/fontawesome-svg-core复制，如果您已经运行SVG + JS Runtime，则无需复制）：

 @import \' unfont /css/fs.css\' ;

您也可以根据构建设置将其从JS或<link>导入到它。

在模板中使用：

unfont\’);

// instead of <i class="fab fa-twitter"></i>
fa(\’fab fa-twitter\’); // returns inline SVG to directly put into your HTML\”>

 const { fa } = require ( \' unfont \' ) ;

// instead of <i class=\"fab fa-twitter\"></i>
fa ( \'fab fa-twitter\' ) ; // returns inline SVG to directly put into your HTML

添加自定义类：

 fa ( \'fas fa-camera fa-2x\' ) ; // <svg class=\"... fas fa-camera fa-2x\">
fa ( \'fas fa-camera block__icon\' ) ; // <svg class=\"... fas fa-camera block__icon\">

添加属性：

 fa ( \'fas fa-camera\' , {
  attributes : { \'id\' : \'camera-icon\' }
} ) ;
// <svg id=\"camera-icon\">

添加内联样式：

 fa ( \'fas fa-camera\' , {
  styles : { \'color\' : \'red\' }
} ) ;
// <svg style=\"color: red\">

动态节点SSR （Express＆Co）应开箱即用，但是请确保根据需要运行自己的性能 /负载tesing和缓存，因为它不是主要用例，并且渲染可能很昂贵。

客户端的使用没有意义。如果您确实需要，请尝试将图标渲染到隐藏的容器中并使用其InnerHTML。切勿将js unfont JS导入您的客户捆绑包。

内联样式模式

如果您在此处和那里仅使用几个fa-类，或依靠内联样式用于关键内容，则可以选择使用inlineCss选项进入Inline样式模式：

 fa ( \'fas fa-camera fa-2x\' , { inlineCss : true } )
// <svg style=\"display: inline-block;font-size: 2em;height: 1em;overflow: visible;vertical-align: -0.125em;width: 1em;\">

这是通过静态评估给定类的字体令人敬畏的样式来起作用的，并应支持所有fa-*实用程序类并尊重styles选项。不利的一面是，您只能用!important或更多的内联styles覆盖样式，因此现有的样式可能会破裂。

要使用fa-spin或fa-pulse ，请包括@keyframes的unfont /css/faSpin.css 。这些样式也可以使用从require(' unfont ').faSpinCss导出的字符串将这些样式插入<style>标签中。这是376（120 GZIP）字节的小型CSS。

与标准FA Runtimes进行比较

具有10个图标的基准测试将产生以下捆绑包（k中的所有尺寸）：

• 默认的unfont Bundle是SVG + JS Core版本的3.5倍。无论您拥有多少图标，都可以摆脱12.5k GZ JS运行时。
• 与字体版本的比较甚至不公平（50倍差异）。
• inlineCss版本的距离又比默认值小1.5倍，或SVG + JS Core的20％。
• unfont立即显示图标，而两个FA版本丢失时都有差距。
• 两个unfont设置都会生成2.5K额外的HTML，这很好。

在没有缓存的慢速3G + 6x CPU放慢效果中，图标显示为字体，5S SVG + JS Core，4S unfont BASE，2S unfont INLINECSS。一旦图标准备就绪，就只会unfont页面，因此没有fouc。

为什么不…

• <img src="..."> / background-image: url(...)每个图标生成一个请求，加载时具有fouc，并且很难样式。
• CSS Data-uri很难样式，这是可惜的。同样，将JS调用插入CSS也很棘手。
• 直接导入的FA SVG无法添加属性和类。同样，从节点中的动态路径导入SVG也很棘手。
• HTML中的SVG Sprite降低了原始的HTML尺寸，BU GZIP已经可以很好地处理SVG重复。应用此技术时，我没有看到FCP / FMP发生重大变化。此外，更难管理并防止动态SSR中流html。
• 远程SVG Sprite听起来像是一个不错的选择，但是我需要进一步研究有关FOUC和实际性能。

执照

由弗拉基米尔·克莱普夫（Vladimir Klepov）@thoughtspile构建

麻省理工学院许可证