node - Fuente Awesome 5 Bundle via NPM
npm version management (3)
Estoy tratando de agrupar solo los íconos de Font Awesome 5 requeridos a través del paquete web, pero los íconos no se reemplazan en el DOM.
He agregado todos los paquetes requeridos de la documentation :
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-brandsSe incluye el siguiente JS personalizado:
"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, })La plantilla 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>
La ruta svg está dentro del archivo JS empaquetado, pero no puedo averiguar qué método debe llamarse.
El siguiente código JS resuelve el problema (desde 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);
Acabamos de lanzar la versión 5.0.2 y actualizamos los paquetes de NPM @fortawesome para corregir algunos errores relacionados con esto. Asegúrese de actualizar antes de intentar cualquier otra cosa.
El paso que falta en el ejemplo anterior es agregar el ícono a la biblioteca:
fontawesome.library.add(faCheck)
Me doy cuenta de que esto ya está respondido, pero me gustaría darle un poco de visibilidad a la solución completa, ya que la información anterior no incluye cómo ejecutar el reemplazo del icono SVG.
Si está cargando Font Awesome 5 a través de NPM y WebPack para usar en el front-end HTML como soy yo, deberá hacer algo como esto en su JS que se incluye en su paquete:
"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();
La última línea es clave, tienes que ejecutar el reemplazo del icono SVG manualmente.
Tratar de usar
fontawesome.library.add(faCheck);
en lugar de
fontawesome.icon(faCheck);
Si no funciona, actualice su pregunta con su plantilla DOM, para ver cómo está definida allí.