web-dev-qa-db-fra.com

Installez la police génial 5 avec npm pour l'utilisation de scss

comme le dit le titre, je ne peux pas installer la police génial 5 avec npm à des fins scss.

Essayer d'installer la version 5

Accorant à https://fontawesome.com/how-to-use/use-with-node-js

npm i --save @fortawesome/fontawesome

En parcourant l'installation dans node_modules, je ne vois aucun fichier scss auquel se connecter. J'ai essayé d'inclure le fichier styles.css dans mon fichier app.scss mais cela n'a pas fonctionné.

Ma configuration pour la version 4:

package.json "font-awesome": "^4.7.0",

app.scss @import "node_modules/font-awesome/scss/font-awesome.scss";

Utilisation <i className="fa fa-save icon controlItem"></i>

C'est de la tarte. Comment puis-je y parvenir avec la version 5 ?? Suis-je en train d'utiliser le mauvais paquet?

MISE À JOUR

Apparemment, utiliser simplement @ fortawesome/fontawesome n'est pas suffisant. Les packages ont été divisés, vous devez donc également sélectionner npm install --save @fortawesome/fontawesome-free-regular Je n'ai toujours pas réussi à l'importer

javascriptnpmsassfont-awesome
10
Anders
npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

Dans votre app.js ou fichier Javascript équivalent,

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

Pour l'utilisation, il y a de légères modifications dans la façon dont les noms de classe sont utilisés. Veuillez vous référer aux icônes sur le site Fontawesome pour les noms de classe "complets".

Exemple

<i class="fas fa-chevron-left"></i>

Bien que l'idée d'ajouter toutes les 3 variantes de polices dans le projet semble être une chose pratique, sachez que cela ralentira les performances lors de la construction/compilation de votre projet. Ainsi, il est fortement recommandé d'ajouter les polices dont vous avez besoin au lieu de tout.

18
Ru Chern Chong

Ma compréhension de FontAwesome 5 est qu'ils utilisent javascript pour ajouter des SVG en ligne au DOM.

Jetez un oeil à cet article: SVG avec JS

Plutôt que de compiler un fichier scss, il vous suffit d'inclure celui-ci javascipt: fontawesome-all.js, toutes les icônes que vous ajoutez à votre code HTML doivent ensuite être converties automatiquement en SVG.

0
Sam Willis

Si vous souhaitez extraire tous les fichiers Javascript spécifiques à Font Awesome dans le vendor.js En utilisant Laravel Mix, vous devrez uniquement extraire les packages dans le extract() en tant que tableau. Vous n'aurez même pas besoin d'utiliser la méthode fontawesome.library.add() pour ajouter la prise en charge des polices. Cela vous aidera à gérer le cache de fichiers spécifique au fournisseur à l'avenir.

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-brands',
        '@fortawesome/fontawesome-free-regular',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/fontawesome-free-webfonts'
    ]);
0
Md Mazedul Islam Khan