unfont下载-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 替换。聪明，但并非总是欢迎JS的额外40K（13k Gzip），并且在脚本加载过程中仍然会让您的用户丢失图标。

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

基本用法

在沙箱中与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或导入到它。

在模板中使用：

unfont');

// instead of 
fa('fab fa-twitter'); // returns inline SVG to directly put into your HTML"> const { fa } = require ( ' unfont ' ) ;

// instead of 
fa ( 'fab fa-twitter' ) ; // returns inline SVG to directly put into your HTML

添加自定义类：

fa('fas fa-camera block__icon'); // "> fa ( 'fas fa-camera fa-2x' ) ; // 
fa ( 'fas fa-camera block__icon' ) ; // 

添加属性：

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

添加内联样式：

"> fa ( 'fas fa-camera' , {
  styles : { 'color' : 'red' }
} ) ;
// 

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

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

内联样式模式

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

"> fa ( 'fas fa-camera fa-2x' , { inlineCss : true } )
// 

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

要使用fa-spin或fa-pulse ，请包括@keyframes的unfont /css/faSpin.css 。这些样式也可以使用从require(' unfont ').faSpinCss导出的字符串将这些样式插入

unfont

unfont

目录

基本用法

内联样式模式