我正在使用Angular 6 angular-starter和fontawesome,然后按照here的说明安装fa到ng。
.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启动)时,它会在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图标出现,但我很烦,因为代码下方出现了红线。 / p>
有人能弄清楚吗?
我的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",
答案 0 :(得分:0)
我将提到一个带有常规图标的情况。希望类似的方法对您有所帮助。您可以导入图标,然后将其从 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>