类型"IconDefinition"的参数不能分配给类型"IconDefinitionOrPack"的参数 [英] Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'

问题描述

我正在使用 Angular 6 angular-starter 和fontawesome，然后使用

I'm using Angular 6 angular-starter and fontawesome, followed here on how to install fa to ng.

.ts中的内容如下:

In my .ts looks like this:

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启动)时，它会在92％的构建上产生错误/警告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'.，但实际上构建似乎成功，并且instagram图标出现，但我很烦，因为代码下方出现了红线.

It works perfectly fine except for free brands, @fortawesome/free-brands-svg-icons. On build (npm start) it produces error/warning 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'. on the 92% build but actually the build appears to be successful and the instagram icon shows up but I'm bothered because a red line below the code appears.

有人能弄清楚吗?

我的package.json

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

推荐答案

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

I'll mention a case with regular icons. Hope a similar approach will help you. You can just import the icon and then typecast it from IconDefinitionOrPack to IconDefinition while adding it to the library in your module constructor.

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

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

Then while adding it in library typecast it

  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>

这篇关于类型"IconDefinition"的参数不能分配给类型"IconDefinitionOrPack"的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！