我正在使用Angular 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>

图标已渲染,但tailwind 类放置在<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>

推荐答案

可以以数组格式从[classes]属性绑定传递自定义类.Docs Reference

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

Angular相关问答推荐

使Angular 效果只执行一次

Angular路由不响应子路由的子路由

如何在HTMLTITLE属性中使用Angular 显示特殊字符?

material 对话框中没有合适的注塑

使用jsPDF生成带有图像的PDF时出现灰色条纹

当可观察到的更改时,异步管道不更新视图

FromEvent不工作,本机事件绑定

ngRouterOutlet和组件生命周期使用自定义模板渲染的问题

大型 Angular 12 应用程序 - 我如何管理 js 文件

使用 BehaviorSubject 从服务更新 Angular 组件

在更改检测之前调用创建的间谍

Angular 2 中的 ChangeDetectionStrategy.OnPush 和 Observable.subscribe

找不到模块'webpack'

Angular2 路由 VS ui-router-ng2 VS ngrx 路由

如何在插值中编写条件?

相对于根目录的 SCSS 导入

在 Angular rxjs 中,我什么时候应该使用 `pipe` 与 `map`

Angular 2 组件不是任何 NgModule 的一部分

如何防止角material垫菜单关闭?

为什么 ngOnInit 被调用两次?