在前端开发中，我们常常需要使用图标来进行界面设计，但是很多时候我们并没有设计师提供图标资源，因此我们需要从公共的图标库中获取。ngx-icons 是一个为 Angular 应用提供矢量图标解决方案的 npm 包，它包含大量的开源图标和自定义图标，同时支持图标的定制和扩展。
安装 ngx-icons
通过以下命令安装 ngx-icons：
--- ------- ------ ---------
使用 ngx-icons
在应用中使用 ngx-icons 可以分为以下三个步骤：
1. 导入图标模块
在需要使用图标的组件中导入图标模块：
------ - ------------- - ---- ------------
2. 注册图标
在 NgModule 的 providers 数组中注册需要使用的图标：
-----------
---
-------- -
-------------
--
---
--
------ ----- --------- - -3. 在模板中使用图标
在模板中使用图标标签，如：
-------- ------------------- --------------------
其中 [icon]="['feather', 'heart']" 表示选用了 ngx-icons 中的 feather 图标库中的 heart 图标。
扩展图标
ngx-icons 不仅包含了大量的开源图标库，同时还支持扩展自定义图标。下面是一个自定义图标的示例：
1. 创建 SVG 图标
首先创建一个 svg 图标文件（假设命名为 my-custom-icon.svg），内容如下：
---- ---------- - -- --- ----------------------------------- ----- ---------- ---------- ----- - - ------- ---- ------ ------ ---------- ----- - - ------- ------------ ----- ------ ------------ ----- - - - - ----- ----- ----- - - - ----- ---- ------------- ------------ ----- - - - ----- - ----- ----- - - - -------------- -------------------------- ----- - - - ----------- ------
2. 使用工具生成图标
使用工具将 svg 图标转换成可用的 ngx-icons 图标：
--- ---------------- ------------------ --------------
其中 my-custom-icon.svg 是 svg 文件的路径，my-custom-icon 是生成的图标名称。
3. 导入并注册图标
在需要使用的组件中导入自定义图标模块并在 NgModule 的 providers 数组中注册图标：
------ - ------------------ - ---- --------------------------
-----------
---
-------- -
---
------------------
--
---
--
------ ----- --------- - -总结
ngx-icons 是一个十分方便的图标解决方案，它支持大量的开源图标库和自定义图标，而且还支持图标的定制和扩展。在应用中使用 ngx-icons 非常简单，只需要在需要使用的组件中导入图标模块，注册需要使用的图标，然后在模板中使用图标标签即可。希望通过本文的介绍，能让大家更好地使用 ngx-icons，并为前端开发带来便利。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005730c81e8991b448e93ad