Angular环境下如何判断Font Awesome图标是否存在？

我做了一个功能：左侧输入框，右侧实时显示和输入值同名的Font Awesome图标。但遇到两个问题：

• 不是所有输入的名称都有对应图标，比如输入随机文本skdfji，还有部分图标只存在于特定库（比如house在FaSolid里有，但FaLight里没有）；
• 输入过程中的中间字符也会触发无效匹配（比如输入house时，前四个字符h、o、u、s都不是有效图标）。

这些情况导致Font Awesome日志大量报错，我还想判断图标是否存在，给用户反馈。

我尝试写了判断图标的方法，但不管图标是否存在，都返回undefined：

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

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

我的依赖版本：

"@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",

你之前的方法无效，核心原因是findIconDefinition只能查找已经注册到Font Awesome library中的图标，如果没有提前把对应库的图标添加进去，它必然返回undefined。

下面提供两种可行的解决方式：

方式一：提前注册目标图标库 #

在项目初始化阶段，把需要用到的图标库全部注册到library中，之后就能正常使用findIconDefinition进行判断：

import { library } from '@fortawesome/fontawesome-svg-core';
import * as faSolid from '@fortawesome/pro-solid-svg-icons';
import * as faLight from '@fortawesome/pro-light-svg-icons';
import * as faRegular from '@fortawesome/pro-regular-svg-icons';
import * as faDuotone from '@fortawesome/pro-duotone-svg-icons';

// 将所有图标库注册到Font Awesome
library.add(faSolid, faLight, faRegular, faDuotone);

// 现在可以正常判断图标是否存在
public iconExists(name: IconName, prefix: IconPrefix): boolean {
  return !!findIconDefinition({ iconName: name, prefix: prefix });
}

方式二：直接从图标包中检查（避免全量注册） #

如果担心全量注册图标导致打包体积过大，可以直接访问对应图标包的icons对象，判断目标图标名称是否存在：

import * as faSolid from '@fortawesome/pro-solid-svg-icons';
import * as faLight from '@fortawesome/pro-light-svg-icons';
import * as faRegular from '@fortawesome/pro-regular-svg-icons';
import * as faDuotone from '@fortawesome/pro-duotone-svg-icons';
import { IconPrefix } from '@fortawesome/fontawesome-svg-core';

public iconExists(name: string, prefix: IconPrefix): boolean {
  // 建立前缀与对应图标库的映射
  const iconLibraryMap = {
    'fas': faSolid.icons,
    'fal': faLight.icons,
    'far': faRegular.icons,
    'fad': faDuotone.icons
  };

  const targetLibrary = iconLibraryMap[prefix];
  // 检查目标库是否存在，且库中包含该图标
  return targetLibrary ? !!targetLibrary[name] : false;
}

另外，针对输入过程中中间字符频繁触发无效判断的问题，建议给输入事件添加防抖处理（比如延迟500ms再执行图标检查），既能减少日志报错，也能提升性能。

内容的提问来源于stack exchange，提问作者Wouter Vandenputte