web-dev-qa-db-fra.com

Police Awesome 5 Bundle via NPM

J'essaie de regrouper uniquement les icônes Font Awesome 5 requises via Webpack, mais celles-ci ne sont pas remplacées dans le DOM.

  1. J'ai ajouté tous les packages requis à partir 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-brands

  2. Le JS personnalisé suivant est inclus:

    "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,
})

  3. Le modèle 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>

Le chemin svg est à l'intérieur du fichier JS fourni, mais je ne peux pas déterminer quelle méthode doit être appelée.

Le code JS suivant résout le problème (depuis la version 5.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);
npmwebpackfont-awesomefont-awesome-5
21
Daniel Potthast

Nous venons de publier la version 5.0.2 et de mettre à jour les packages @fortawesome NPM afin de corriger quelques bugs liés à cela. Assurez-vous de mettre à niveau avant d'essayer autre chose.

L'étape manquante de l'exemple ci-dessus consiste à ajouter l'icône à la bibliothèque:

fontawesome.library.add(faCheck)
7
Rob Madole

Je sais que la réponse est déjà donnée, mais j'aimerais donner une certaine visibilité à la solution complète, car les informations ci-dessus n'incluent pas comment exécuter le remplacement de l'icône SVG.

Si vous chargez Font Awesome 5 via NPM et WebPack pour une utilisation dans le langage HTML frontal comme je le suis, vous devrez procéder de la sorte, dans votre JS inclus dans cette offre:

"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();

Cette dernière ligne est la clé, vous devez exécuter le remplacement d'icône SVG manuellement.

12
cr0ybot

Essayez d'utiliser

fontawesome.library.add(faCheck);

au lieu de

fontawesome.icon(faCheck);

Si cela ne fonctionne pas, veuillez mettre à jour votre question avec votre modèle DOM afin de voir comment elle est définie.

1
Radu Maris