PrimeNG 是 Angular 应用程序中一个流行的 UI 组件库，它提供了广泛的预构建组件，其中包括图标。在 Angular 17 中，我们可以轻松地将 PrimeNG 图标集成到我们的项目中。在本文中，我们将引导您完成在 Angular 17 应用程序中设置和使用 PrimeNG 图标的全过程。
前置知识
实现方法
- 我们将使用 Angular 17 来演示 PrimeIcons 的使用方法。
- 在完成 Angular 应用程序的初始设置后，我们将安装并导入 primeicons。
- 我们将在 styles.css 文件中添加相关的导入语句，以便在整个应用程序中访问 primeicons。
- 完成设置后，我们可以通过 标签以及每个图标对应的类名来使用 primeicons。
在 Angular 17 中使用 PrimeNG 图标的步骤
步骤 1：创建 Angular 项目
ng new Prime-Icon
文件夹结构
!Screenshot-2024-08-14-131752文件夹结构
步骤 2：使用以下命令在您的项目中安装必要的包。
npm install primeicons
依赖项
"dependencies": {
"@angular/animations": "^17.2.0",
"@angular/common": "^17.2.0",
"@angular/compiler": "^17.2.0",
"@angular/core": "^17.2.0",
"@angular/forms": "^17.2.0",
"@angular/platform-browser": "^17.2.0",
"@angular/platform-browser-dynamic": "^17.2.0",
"@angular/platform-server": "^17.2.0",
"@angular/router": "^17.2.0",
"@angular/ssr": "^17.2.0",
"express": "^4.18.2",
"primeicons": "^7.0.0",
"primeng": "^17.16.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
步骤 3：在 styles.css 中导入 primeicons
@import "primeicons/primeicons.css";
示例 1：简单使用 PrimeIcon
app.component.html:
下面提到的代码显示了 标签，包含 4 个类，代表 primeicons 的 4 个图标，即 check（对勾）、times（关闭）、search（搜索）、user（用户）。
HTML
CODEBLOCK_e6a55e93
#### 输出结果
!Screenshot-2024-08-14-132100简单使用 PrimeIcon 的输出结果
示例 2：更改图标颜色
app.component.html:
下面提到的代码显示了 标签，包含 4 个类，代表 primeicons 的 4 个图标，即 check、times、search、user，它们分别具有不同的颜色：蓝色、黄色、绿色和橙色。
HTML
CODEBLOCK_ecafb644
#### 输出结果
!Screenshot-2024-08-14-132325更改图标颜色的输出结果
示例 3：旋转 Primeicon 中的图标
app.component.html
下面提到的代码显示了 标签，包含 2 个类，代表 primeicons 的 2 个图标，即 spinner（加载圈）和 cog（齿轮），它们会像加载图标一样进行旋转。
HTML
CODEBLOCK_fa4a3200
#### 输出结果
!chrome-capture-2024-8-14旋转图标的输出结果