字体真棒5通过NPM捆绑 [英] Font Awesome 5 Bundle via NPM
问题描述
我正在尝试通过webpack捆绑必需的Font Awesome 5图标，但在DOM中不会替换这些图标.
I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM.
-
我从文档:
yarn add -D @fortawesome/fontawesome
yarn add -D @fortawesome/fontawesome-pro-solid
yarn add -D @fortawesome/fontawesome-pro-regular
yarn add -D @fortawesome/fontawesome-free-brands
包含以下自定义JS:
The following custom JS is included:
"use strict";
import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
fontawesome.icon(faCheck);
function iconsDoneRendering () {
console.log('Icons have rendered'); // No output in console
}
fontawesome.dom.i2svg({
callback: iconsDoneRendering,
})
HTML模板:
The HTML template:
<head>
<link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
<ul class="fa-ul">
<li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
</ul>
<script src="/js/app.js?v2.1.4"></script>
</body>
svg路径位于捆绑的JS文件内部，但我无法确定需要调用哪种方法.
The svg path is inside the bundled JS file, but I can't figure out which method needs to be called.
以下JS代码解决了该问题(自v5.0.2开始):
The following JS code solves the problem (since v5.0.2):
"use strict";
import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '@fortawesome/fontawesome-pro-regular/faPhone';
fontawesome.library.add(faCheck,faPhone);
推荐答案
我们刚刚发布了5.0.2版，并更新了@fortawesome NPM软件包，以修复与此相关的一些错误.在尝试其他任何操作之前，请确保先升级.
We just released version 5.0.2 and updated the @fortawesome NPM packages to fix a few bugs related to this. Make sure you upgrade before you try anything else.
上面的示例缺少的步骤是将图标添加到库中:
The missing step of the above example is to add the icon to the library:
fontawesome.library.add(faCheck)
这篇关于字体真棒5通过NPM捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
