Dan*_*ast 21 npm font-awesome webpack font-awesome-5
我试图通过webpack仅捆绑所需的Font Awesome 5图标,但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:
"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模板:
<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文件中,但我无法确定需要调用哪个方法.
以下JS代码解决了这个问题(从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);
cr0*_*bot 12
我意识到这已经得到了解答,但我想提供一些完整解决方案的可见性,因为上面的信息不包括如何执行SVG图标替换.
如果您正在通过NPM和WebPack加载Font Awesome 5以便像我一样在前端HTML中使用,那么您需要在包中包含的JS中执行类似的操作:
"use strict";
// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js
import fontawesome from '@fortawesome/fontawesome';
// This enables using FontAwesome in CSS pseudo elements
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
fontawesome.config.searchPseudoElements = true;
// Icons should be imported individually to keep bundle size down
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '@fortawesome/fontawesome-pro-solid/faPhone';
fontawesome.library.add(faCheck, faPhone);
// If really necessary, entire styles can be loaded instead of specifying individual icons
//import solid from '@fortawesome/fontawesome-pro-solid';
//fontawesome.library.add(solid);
// Execute SVG replacement
fontawesome.dom.i2svg();
最后一行是关键,您必须手动执行SVG图标替换.
小智 8
我们刚刚发布了5.0.2版并更新了@fortawesome NPM软件包以修复与此相关的一些错误.确保在尝试其他任何操作之前升级.
上面示例中缺少的步骤是将图标添加到库中:
fontawesome.library.add(faCheck)
| 归档时间： |
|
| 查看次数： |
15468 次 |
| 最近记录： |