我怎样才能通过顺风班到方舟的角度

Question

我正在使用角FontAwesome包处理我的项目中的图标。

在文档之后，我可以从组件中像这样呈现我的图标：

...
import { faSignOut } from '@fortawesome/free-solid-svg-icons';

...
export class MyComponent implements OnInit {
    @HostBinding('class') classes = 'h-full';

    faSignOut = faSignOut;
    
    ...
}

我的模板如下所示：

<fa-icon [icon]="faSignOut" class="h-6 w-6 text-gray-300 transition duration-75 ease-linear group-hover:text-white"></fa-icon>

图标被呈现，但是顺风类被放置在<fa-icon>上。

我可以手动编写项目代码，但我想将图标的名称从组件传递给循环模板。

如何将h-6 w-6类从<fa-icon>传递给生成的svg？

例如：

<fa-icon class="ng-fa-icon">
    <svg class="h-6 w-6 text-gray-300 transition duration-75 ease-linear group-hover:text-white">...</svg>
</fa-icon>

Answer 1

您可以从[classes]属性绑定以数组格式传递自定义类。文档参考

<fa-icon [icon]="faSignOut" [classes]="['h-6', 'w-6']">
</fa-icon>