Angular & FontAwesome：如何知道圖標是否存在

Question

假設以下場景：

左邊有一個輸入框，右邊有一個fontawesome圖標。 右邊的圖標只是簡單的名字和輸入框的值一樣。

這意味着用戶可以在輸入元素中鍵入內容，並在右側預覽 fontawesome 圖標。 但是現在出現的問題是雙重的

1. 並非所有圖標都存在。 例如，沒有帶有隨機文本“skdfji”的圖標。 或者並非所有圖標都存在於每個庫中（例如它確實存在於 FaSolid 但不存在於 FaLight 中）。
2. 該圖標可能存在，但並非其間的所有擊鍵都會產生有效圖標。

例如，當我嘗試“房子”圖標時，我首先輸入“h”，然后是“o”，然后是“u”，然后是“s”，這意味着有 4 個不匹配的無效圖標，只有在最后一次擊鍵時才會有效圖標被找到。

所有這些步驟都會導致 fontawesome 的記錄器變得瘋狂。

除了煩人的日志之外，我還想知道該圖標是否存在，因為這樣我可以向用戶提供一些反饋。

我還嘗試編寫一種方法來了解圖標是否存在。

import { findIconDefinition, IconName, IconPrefix, SizeProp } from '@fortawesome/fontawesome-svg-core';

public iconExists(name: IconName, libarary: IconPrefix): boolean {
  return !!findIconDefinition({ iconName: name, prefix: library });
}
...
otherMethod() {
  if(findIconDefinition('house', 'fal') {
    console.log('Found', 'house');
  } else {
    console.log('Not found', 'house');
  }
}

但是 Fontawesome 總是會返回 undefined。 即使是現有的圖標。 是否有辦法只知道它是否存在？

這些是我的依賴項

"@fortawesome/angular-fontawesome": "^0.12.1",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/pro-duotone-svg-icons": "^6.2.1",
"@fortawesome/pro-light-svg-icons": "^6.2.1",
"@fortawesome/pro-regular-svg-icons": "^6.2.1",
"@fortawesome/pro-solid-svg-icons": "^6.2.1",

Answer 1

findIconDefinition不起作用是因為angular-fontawesome不使用fontawesome-svg-core中的全局圖標庫，並且那里從未注冊過任何圖標。

如果你使用圖標庫的方式注冊了庫中的所有圖標，你可以注入FaIconLibrary服務來檢查圖標是否被注冊：

class AppComponent {
  constructor(private iconLibrary: FaIconLibrary) {}

 iconExists(name: IconName, prefix: IconPrefix): boolean {
    return this.iconLibrary.getIconDefinition(prefix, name) != null;
  }
}

如果您使用顯式引用方法，您可以嘗試使用動態導入加載圖標定義：

class AppComponent {
  private icon: IconDefinition | null = null;

  constructor(private iconLibrary: FaIconLibrary) {}

  tryLoadIcon(name: IconName, prefix: IconPrefix): boolean {
    import(`@fortawesome/pro-${prefix}-svg-icons/${name}.js`)
      .then((module) => {
        this.icon = module[this.iconName];
      })
      .catch((err) => console.error('Icon does not exist'));
  }
}