web-dev-qa-db-ja.com

angle-cliプロジェクトに@ fortawesome / fontawesomeを含める

Angular> 5.0.0。を実行している私のangular-cliプロジェクト（1.6.0）に素晴らしいフォント5を含めようとしています。

私が使用した（説明どおり）：

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

パッケージを正常に取得します。次に、angular-cliにパッケージを含めます。私のapp.component.ts私がやろうとしました（で説明されているとおり： https://www.npmjs.com/package/@fortawesome/fontawesome ）：

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

しかし、TypeScriptはエラーをスローします。

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

Font Awesome 4では、.cssファイルを「スタイル」配列に含めました。しかし、Font Awesome 5には、すべてのcssを含むcssファイルがありません。それは単なる.jsファイルの束です。

Font Awesome 5をAngular CLIプロジェクトに適切に含めるにはどうすればよいですか？（たとえば、<i class="fal fal-user"></i>私のマークアップで）

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

Font Awesome 5では、FA4のようにフォントベースのアイコンを使用するか、新しいSVGベースのアイコンを使用できます。私はまだangle-cliでSVGベースの設定を検討していますが、フォントベースの場合は次のことができます：

FontAwesomeを.angular-cli.jsonに追加：

FAスタイルをCSSまたは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",
  ],

またはFontAwesomeをスタイルに直接追加：

Styles.cssまたは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";

またはFontAwesomeをCSSとしてスタイルに直接追加：

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

FA SCSSを変更/強化する必要がない場合は、おそらく最初の方法を使用するのが最も簡単でしょう。構成の一部になります。

SVGについて

これにはFA javascriptファイルを含める必要があると思われますが、まだ詳しく調べていません。完了したら、おそらく上記と非常によく似ています。

SVG Redux

（SVGの詳細を追加するために編集）

思ったよりずっと簡単です。適切なモジュールがインストールされている場合：

...必要な2つのスクリプトを.angular-cli.jsonに追加するだけです。基本のfontawesomeスクリプトが必要で、次に必要なパック（または3つすべて）が必要です。

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

これらのスクリプトは通常のFAクラスを検出し、要素をFAアイコンの完全なSVGバージョンに置き換えます。

24
j3hyde