web-dev-qa-db-fra.com

Inclure @ fortawesome / fontawesome dans le projet angular-cli

J'essaie d'inclure la police awesome 5 dans mon projet angular-cli (1.6.0) exécutant Angular> 5.0.0.

J'ai utilisé (comme décrit):

yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light

Il obtient les packages avec succès. Maintenant, je veux inclure le package sur mon angular-cli. Dans mon app.component.ts J'ai essayé de le faire (comme décrit sur: https://www.npmjs.com/package/@fortawesome/fontawesome ):

import  fontawesome  from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-light'

Mais TypeScript lance et erreur:

ERROR in src/app/app.component.ts(2,9): error TS1192: Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export.

Avec Font Awesome 4, je viens d'inclure le fichier .css dans le tableau "styles". Mais Font Awesome 5 n'a pas de fichier css contenant tous les css. Ce n'est qu'un tas de fichiers .js.

Comment puis-je inclure Font Awesome 5 dans mon projet Angular CLI correctement? (Je veux pouvoir utiliser par exemple <i class="fal fal-user"></i> dans mon balisage)

angularangular-clifont-awesomefont-awesome-5angular-fontawesome
10
petur

Dans Font Awesome 5, vous pouvez utiliser des icônes basées sur des polices comme dans FA4 ou vous pouvez utiliser de nouvelles icônes basées sur SVG. J'étudie toujours la configuration basée sur SVG avec angular-cli mais pour la police, vous pouvez:

Ajoutez FontAwesome à votre .angular-cli.json:

Incluez les styles FA au format CSS ou SCSS:

  "styles": [
    "styles.scss"
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
  ],

ou ajoutez directement FontAwesome à vos styles:

Incluez les styles dans styles.css ou styles.scss:

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";

ou ajoutez directement FontAwesome en CSS à vos styles:

@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";

Si vous n'avez pas besoin de modifier/améliorer le FA SCSS, il est probablement plus simple d'utiliser la première méthode. Cela fait simplement partie de votre configuration.

Concernant SVG

Je soupçonne que cela nécessite que les fichiers javascript FA soient inclus, mais je n'ai pas encore exploré cela. Une fois terminé, il est probablement assez similaire à ce qui précède.

SVG Redux

(modifié pour ajouter plus de détails sur SVG)

C'est beaucoup plus simple que ce à quoi je m'attendais. Étant donné que vous avez installé les bons modules:

... vous pouvez simplement ajouter les deux scripts requis à votre .angular-cli.json. Vous avez besoin du script de police de base, puis du pack dont vous avez besoin (ou des trois):

  "scripts": [
    "../node_modules/@fortawesome/fontawesome/index.js",
    "../node_modules/@fortawesome/fontawesome-free-solid/index.js"
  ],

Ces scripts trouveront vos classes FA normales et remplaceront les éléments par des versions SVG complètes des icônes FA.

24
j3hyde