web-dev-qa-db-ja.com

NPMを介したFont Awesome 5バンドル

必要なFont Awesome 5アイコンのみをwebpack経由でバンドルしようとしていますが、アイコンはDOMで置き換えられません。

  1. 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. 次のカスタムJSが含まれています。

    "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. 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>

SvgパスはバンドルされたJSファイル内にありますが、どのメソッドを呼び出す必要があるのか​​わかりません。

次のJSコードは問題を解決します（v5.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

バージョン5.0.2をリリースし、@ fortawesome NPMパッケージを更新して、これに関連するいくつかのバグを修正しました。何かを試す前に、必ずアップグレードしてください。

上記の例にないステップは、ライブラリにアイコンを追加することです。

fontawesome.library.add(faCheck)
7
Rob Madole

これはすでに回答済みですが、上記の情報にはSVGアイコンの置換を実行する方法が含まれていないため、完全なソリューションを可視化したいと思います。

私のようにフロントエンドHTMLで使用するためにNPMとWebPack経由でFont Awesome 5をロードする場合、バンドルに含まれているJSで次のようなことを行う必要があります。

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

最後の行が重要です。SVGアイコンの置換を手動で実行する必要があります。

12
cr0ybot

使用してみてください

fontawesome.library.add(faCheck);

の代わりに

fontawesome.icon(faCheck);

動作しない場合は、DOMテンプレートで質問を更新して、そこで定義されている方法を確認してください。

1
Radu Maris