npm 包 ngx-font-awesome 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，图标的使用经常会遇到各种问题，例如图标库的引入、图标的样式设置等。这时候，一个好用的图标库就显得十分必要。ngx-font-awesome（下文简称为 ngx-fa）就是这样一个非常实用的图标库，它为我们提供了丰富的图标，并且支持了多种设置方式，使用起来非常便捷。

什么是 ngx-fa

ngx-fa 是基于 font-awesome 的 Angular 图标库。ngx-fa 提供了丰富的图标，同时支持多种设置方式。

值得一提的是这个包还有正版，正版更加丰富，可以去 fontawesome 官网购买。

安装 ngx-fa

安装 ngx-fa 非常简单，只需要使用 npm 命令即可：

npm install @fortawesome/fontawesome-free
npm install @fortawesome/angular-fontawesome
npm install font-awesome

到这里，ngx-fa 就安装完成了。

使用 ngx-fa

在使用 ngx-fa 之前，我们需要先在 app.module.ts 中导入 Angular 的 FaIconLibrary 类：

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  ...,
})

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas);
  }
}

在这里，我们使用 addIconPacks 方法将 FontAwesome 的 Solid 图标集添加到了 FaIconLibrary 中。

接着，在我们需要使用图标的组件中，导入 FontAwesome 的图标类，例如 faCoffee 图标：

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

@Component({
  ...,
})

export class MyComponent {
  icon = faCoffee;
}

最后，在 HTML 模板中，使用 fa-icon 标签引入图标并设置它的外观和行为：

<fa-icon [icon]="icon" [spin]="true" [size]="3x"></fa-icon>

以上是一个使用 ngx-fa 的完整流程，简单易懂。

ngx-fa 的高级用法

使用自定义图标

还有一种稍微高级一些的使用 ngx-fa 的方式，就是使用自定义图标，让图标更符合需求。

这里，我们以修改 faCheckCircle 图标为例：

import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';

const calCheckCircle: IconDefinition = Object.assign(fasCheckCircle, { iconName: 'cal-check-circle' });

@Component({
  ...,
})

export class MyComponent {
  icon = calCheckCircle;
}

这段代码就是将原来的 faCheckCircle 图标修改为了 cal-check-circle 图标，并添加了一个自定义的 iconName 属性。

在HTML模板中的使用方式同样发生了改变：

<fa-icon [icon]="icon" [spin]="true" [size]="3x"></fa-icon>

图标的样式和颜色

在 ngx-fa 中，我们可以为图标设置样式和颜色，以便于更好的展示。

<fa-icon [icon]="icon" [spin]="true" [size]="3x" [class]="'text-primary'"></fa-icon>

在这里，我们将 fa-icon 元素的 class 设置为 'text-primary'，原因是这个把图标颜色修改为了 primary 颜色。

图标的旋转和动画

有时候，我们还需要为图标设置旋转或者动画，以提高其曝光度。

<fa-icon [icon]="icon" [spin]="true" [size]="3x" [class]="'text-primary'" [animation]="{ name: 'spin', duration: 1000 }"></fa-icon>

在这里，我们将 fa-icon 元素的 [animation] 属性设置为 { name: 'spin', duration: 1000 }，原因是这个将图标设置为了旋转状态，并且旋转速度为1000毫秒。这个动画是预设的。

图标的堆叠

有时候，我们还需要在一个元素中使用两个图标，而这时候，我们就需要使用图标的堆叠功能了。

<fa-stack [size]="2x">
  <fa-icon [icon]="faSquare" [stackItem]="true"></fa-icon>
  <fa-icon [icon]="faTwitter" [stackItem]="true" [inverse]="true"></fa-icon>
</fa-stack>

在这里，我们使用了 fa-stack 元素将两个图标 faSquare 和 faTwitter 堆叠，并且将它们的大小都设为了 2x。注意，要在 fa-icon 元素中设置 [stackItem]="true" 属性，这个属性告诉 ngx-fa 这个元素是一个堆叠元素。

现在，我们已经可以熟练地使用 ngx-fa 了。需要注意的是，除了上面所说的基本使用方式和高级用法外，ngx-fa 还有很多其他的设置，大家可以自行查看官方文档，并学习它的更多用法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53dd0