使用例は、クライアントが使用しないアイコンをダウンロードする必要なく、実行時までそれらのアイコンがどうなるかを必ずしも知ることなく、文字列から任意のFontAwesome アイコンを使用できるようにすることです。
ここで説明されているアイコン ライブラリ アプローチを使用して、 angular-fontawesome を使用しています: https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md
この構文例では:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FontAwesomeModule],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(library: FaIconLibrary) {
// Add an icon to the library for convenient access in other components
library.addIcons(faCoffee);
}
}
faCoffeeしたがって、理想的には、パーツを動的にすることが可能です。静的分析はそれfaCoffeeがインポートされていることを確認できることを知っているので、それをバンドルすることを知っており、それが動的変数である場合、どのエクスポートが必要になるかを推測できない可能性があります-しかし、その時点で、 Webpack、またはその他のユーティリティには、コードをビルドに含めることができますが、実行時に必要な場合にのみクライアントにダウンロードできるものがあります。
いくつか試してみました。
私はこの試みを認識していましたが、これは Vue であり、うまくいかないかもしれません: https://github.com/FortAwesome/vue-fontawesome/issues/170#issuecomment-484544272
ここで説明されているように、ツリー シェーキングを放棄してディープ インポートを使用できることはわかっています: https://fontawesome.com/v5/docs/apis/javascript/tree-shaking#alternative-to-tree-shaking-deep-imports
すなわち
import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'
だから私はhttps://dmitripavlutin.com/ecmascript-modules-dynamic-import/#1-dynamic-import-of-modulesに基づいて、その周りのアプローチを試みました。
const iconModule = from(import('@fortawesome/pro-duotone-svg-icons/faCoffee'));
return iconModule.pipe(map(module => module[fullIconName] as IconDefinition));
これは明らかに機能し、IconDefinition をライブラリに追加するだけで済みます。switch ステートメント内では、faCoffee実行時にコードが実行されるときにのみバンドルがロードされることを意味します。
ただし、何か動的なことをしようとすると:
const getPath = (fullIconName: string) => `@fortawesome/pro-duotone-svg-icons/${fullIconName}`;
const iconModule = from(import(getPath(fullIconName)));
return iconModule.pipe(map(module => module[fullIconName] as IconDefinition));
当然のことながら、バンドルされていないため機能しません。
Error: Cannot find module '@fortawesome/pro-duotone-svg-icons/faCoffee'
実際、importドキュメントには、達成可能な最善の方法はファイル全体をインポートすることであると記載されています。
https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
https:// javascript.info/modules-dynamic-imports#the-import-expression
この回答は、それが不可能である可能性も示唆しています: https://stackoverflow.com/a/55744858/1061602
ただし、これは正しいアプローチで可能かもしれないことを示唆しています: https://stackoverflow.com/a/65298694/1061602
動的インポートとコード分割に関する情報がここにたくさんあることがわかります。いくつか試してみましたが、何をすべきかよくわかりません。https://webpack.js.org/guides/code-splitting/#dynamic-imports
代わりに使用できる FontAwesome 用の他のプラグインがあるかもしれません。
または、誰かが次の行に沿って大規模な switch ステートメントを作成した可能性があります。
switch (iconName) {
case 'faCoffee':
/* import faCoffee */
case 'faSomethingElse':
/* import faSomethingElse */
これもうまくいきます。