简介
ngx-svg-icon 是一个能够在 Angular 程序中直接使用 SVG 图标的一款 npm 包。通过使用 ngx-svg-icon，我们可以很方便地将一些常用或自定义的 SVG 图标作为组件直接在 Angular 应用程序中使用。
本文将带领大家一步步使用 ngx-svg-icon 包来实现 SVG 图标在 Angular 应用程序中的使用。
安装
我们可以通过 npm 安装 ngx-svg-icon，只需要在命令行执行如下指令即可完成安装：
npm install ngx-svg-icon --save
使用
导入
安装完成后，需要在 AppModule 中导入 NgxSvgIconModule，代码如下所示：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------------------
------------ -------
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -需要注意的是，导入 NgxSvgIconModule 时，需要使用 forRoot() 函数，并通过传递一个对象来配置 ngx-svg-icon 组件模块。
这里我们设置了一个默认尺寸为 ‘100px’ 的配置选项。
使用组件
现在我们就可以在我们的组件中使用 ngx-svg-icon 中提供的 IconComponent 组件了。IconComponent 组件通过在其 src 属性中指定 SVG 图标的文件名来显示 SVG 图标。
下面是一个简单的用法：
<ngx-icon name="heart"></ngx-icon>
其中 name 属性的值就是 SVG 图标的文件名，例如 heart.svg。
使用 SVG 图标
在 src/assets/icons 文件夹中添加我们需要使用的 SVG 图标，例如，我们添加一个名为 heart.svg 的 SVG 图标：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M20.83 4.18a5.5 5.5 0 01.7 7.1l-8.53 9.16a2.75 2.75 0 01-4.15 0l-8.52-9.16a5.5 5.5 0 017.8-7.9l2.97 2.96 2.97-2.96a5.5 5.5 0 017.16-.2z" /> </svg>
动态绑定
当然，如果需要动态绑定 SVG 图标的SRC，我们也可以通过修改IconComponent 组件的 src 属性来实现：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-----
--------- ---------------------------
------- -------------------------------- -------------
------
--
--
------ ----- ------------ -
------- - -------------------
--------------- -
------------ - ------------------
-
-我们在 AppComponent 中声明了 iconSrc 属性，这个属性的值为 assets/heart.svg。
在 changeIconSrc() 方法中，我们通过修改 iconSrc 属性的值实现了在页面上动态更换 SVG 图标。通过使用绑定语法，IconComponent 组件会及时响应这些变化。
总结
至此，我们已经成功地安装和使用了 ngx-svg-icon 包，将 SVG 图标在 Angular 应用程序中展示出来。
本文主要介绍了 ngx-svg-icon 的安装、配置以及使用方法，并给出了一些示例。
希望本文可以帮助大家更好地使用 ngx-svg-icon。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b91