在前端开发中，我们常常需要使用图标来进行界面设计，但是很多时候我们并没有设计师提供图标资源，因此我们需要从公共的图标库中获取。ngx-icons 是一个为 Angular 应用提供矢量图标解决方案的 npm 包，它包含大量的开源图标和自定义图标，同时支持图标的定制和扩展。
安装 ngx-icons
通过以下命令安装 ngx-icons：
npm install --save ngx-icons
使用 ngx-icons
在应用中使用 ngx-icons 可以分为以下三个步骤：
1. 导入图标模块
在需要使用图标的组件中导入图标模块：
import { FeatherModule } from 'ngx-icons';2. 注册图标
在 NgModule 的 providers 数组中注册需要使用的图标：
@NgModule({
...
imports: [
FeatherModule
],
...
})
export class AppModule { }3. 在模板中使用图标
在模板中使用图标标签，如：
<fa-icon [icon]="['feather', 'heart']"></fa-icon>
其中 [icon]="['feather', 'heart']" 表示选用了 ngx-icons 中的 feather 图标库中的 heart 图标。
扩展图标
ngx-icons 不仅包含了大量的开源图标库，同时还支持扩展自定义图标。下面是一个自定义图标的示例：
1. 创建 SVG 图标
首先创建一个 svg 图标文件（假设命名为 my-custom-icon.svg），内容如下：
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <path d="M56.536 7.87a3.174 3.174 0 0 0-4.509 0L40 21.492 27.982 7.87a3.172 3.172 0 0 0-4.509 4.509L35.497 30.06 23.478 42.079a3.174 3.174 0 0 0 0 4.509 3.172 3.172 0 0 0 4.509 0L40 38.508l12.018 12.018a3.172 3.172 0 0 0 4.509 0 3.174 3.174 0 0 0 0-4.509L44.503 30.057l12.018-12.018a3.173 3.173 0 0 0 0-4.509z"/> </svg>
2. 使用工具生成图标
使用工具将 svg 图标转换成可用的 ngx-icons 图标：
npx ngx-icon-builder my-custom-icon.svg my-custom-icon
其中 my-custom-icon.svg 是 svg 文件的路径，my-custom-icon 是生成的图标名称。
3. 导入并注册图标
在需要使用的组件中导入自定义图标模块并在 NgModule 的 providers 数组中注册图标：
-- -------------------- ---- -------
------ - ------------------ - ---- --------------------------
-----------
---
-------- -
---
------------------
--
---
--
------ ----- --------- - -总结
ngx-icons 是一个十分方便的图标解决方案，它支持大量的开源图标库和自定义图标，而且还支持图标的定制和扩展。在应用中使用 ngx-icons 非常简单，只需要在需要使用的组件中导入图标模块，注册需要使用的图标，然后在模板中使用图标标签即可。希望通过本文的介绍，能让大家更好地使用 ngx-icons，并为前端开发带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730c81e8991b448e93ad