Я пытаюсь связать только необходимые значки Font Awesome 5 через webpack, но значки не заменяются в 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-код решает проблему (начиная с версии 5.0):
"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);