Umfassen @fortawesome/fontawesome Schwenk-cli-Projekt

Ich versuche, font awesome 5 auf meiner Winkel-cli Projekt (1.6.0) mit Winkel - >5.0.0.

Ich (wie beschrieben):

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

Wird es die Pakete erfolgreich. Nun ich möchte das Paket für meine Winkel-cli. In meinem app.component.ts ich habe versucht zu tun (wie hier beschrieben: https://www.npmjs.com/package/@fortawesome/fontawesome): 

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

Aber Typoskript wirft und Fehler:

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

Mit Font Awesome 4, die ich gerade aufgenommen die .die css-Datei "styles" - array. Aber Font-Awesome 5 nicht über eine css-Datei, die alle css. Es ist nur ein Haufen .js-Dateien.

Wie kann ich die Font Awesome 5 in meinem Winkel-CLI-Projekt richtig? (Ich möchte in der Lage zu verwenden, zum Beispiel <i class="fal fal-user"></i> in meinem markup)

InformationsquelleAutor petur | 2018-01-10
  1. 24

    Font-Awesome 5 Sie können die Verwendung der schriftart-basierte Symbole wie in FA4 oder Sie können neue SVG-basierten icons. Ich bin noch auf der Suche in der Konfiguration SVG-Basis mit dem kantig-cli aber für Schrift-basiert, können Sie:

    Hinzufügen FontAwesome zu Ihr .Winkel-cli.json:

    Gehören der FA-Stilen, die entweder als CSS oder 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",
  ],

    oder hinzufügen, FontAwesome, um Ihre Stile direkt:

    Umfassen die Stile Stile.css und 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";

    oder fügen Sie FontAwesome als CSS-Stile direkt:

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

    Wenn Sie müssen Sie nicht ändern/verbessern der FA SCSS, dann ist es wahrscheinlich am einfachsten verwenden Sie die erste Methode. Es wird einfach ein Teil der Konfiguration.

    In Bezug auf SVG -

    Ich vermute, dass dies erfordert die FA javascript-Dateien enthalten sein, aber ich habe nicht vertiefte sich in die noch. Sobald es fertig ist, wahrscheinlich ganz ähnlich wie oben.

    SVG-Redux

    (editiert, um weitere Details hinzufügen, die auf SVG)

    Es ist viel einfacher, als ich erwartet hatte. Gegeben, Sie haben die richtigen Module installiert:

    ...Sie können fügen Sie einfach die beiden Skripte an Ihr .Winkel-cli.json. Sie müssen die Basis fontawesome Skript und dann je Packung Sie benötigen (oder alle drei):

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

    Diese Skripte findet Ihr im normalen FA-Klassen und ersetzen Sie die Elemente mit voller SVG-Versionen der FA Symbole.

    InformationsquelleAutor j3hyde
Schreibe einen Kommentar