“IconDefinition”类型的参数不可分配给“IconDefinitionOrPack”类型的参数

Question

我用角6角起动机 和fontawesome，随后这里就如何发安装到纳克。

在我的 .ts 看起来像这样：

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';

public ngOnInit() {
    library.add(faInstagram);
    library.add(faLink);
    dom.watch();
}

然后在 .html 中：

<fa-icon [icon]="['fab', 'instagram']"></fa-icon>

除了免费品牌，它工作得很好@fortawesome/free-brands-svg-icons。在构建（npm start）时，它会Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'. 'IconDefinition' is not assignable to type 'IconPack'. signature is missing in type 'IconDefinition'.在 92% 的构建中产生错误/警告，但实际上构建似乎成功并且显示了 instagram 图标，但我很烦恼，因为代码下方出现了一条红线。

有人能弄清楚吗？

我的 package.json

"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.6",
"@fortawesome/free-brands-svg-icons": "^5.4.2",
"@fortawesome/free-solid-svg-icons": "^5.4.1",

Answer 1

我会提到一个带有常规图标的案例。希望类似的方法对您有所帮助。您只需导入图标，然后将其从IconDefinitionOrPack 类型转换为IconDefinition，同时将其添加到模块构造函数中的库中。

import { faTimesCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons';

然后在将其添加到库中时对其进行类型转换

  export class AppModule {
    constructor() {
      library.add(faTable);
      library.add(faChartArea);
      library.add(faTachometerAlt);
      library.add(faTimesCircle as IconDefinition);
      library.add(faCheckCircle as IconDefinition);
    }
  }

在 HTML 中，

<div class="col-md-6">
   <fa-icon [icon]="['far', 'check-circle']"></fa-icon>
   <span>Tax Info</span>
</div>