npm 包 ngx-svg-icon 使用教程

阅读时长 4 分钟读完

简介

ngx-svg-icon 是一个能够在 Angular 程序中直接使用 SVG 图标的一款 npm 包。通过使用 ngx-svg-icon,我们可以很方便地将一些常用或自定义的 SVG 图标作为组件直接在 Angular 应用程序中使用。

本文将带领大家一步步使用 ngx-svg-icon 包来实现 SVG 图标在 Angular 应用程序中的使用。

安装

我们可以通过 npm 安装 ngx-svg-icon,只需要在命令行执行如下指令即可完成安装:

使用

导入

安装完成后,需要在 AppModule 中导入 NgxSvgIconModule,代码如下所示:

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- ---------------
------ - ------------ - ---- ------------------

-----------
  ------------- -
    ------------
  --
  -------- -
    --------------
    --------------------------
      ------------ -------
    --
  --
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -

需要注意的是,导入 NgxSvgIconModule 时,需要使用 forRoot() 函数,并通过传递一个对象来配置 ngx-svg-icon 组件模块。

这里我们设置了一个默认尺寸为 ‘100px’ 的配置选项。

使用组件

现在我们就可以在我们的组件中使用 ngx-svg-icon 中提供的 IconComponent 组件了。IconComponent 组件通过在其 src 属性中指定 SVG 图标的文件名来显示 SVG 图标。

下面是一个简单的用法:

其中 name 属性的值就是 SVG 图标的文件名,例如 heart.svg。

使用 SVG 图标

在 src/assets/icons 文件夹中添加我们需要使用的 SVG 图标,例如,我们添加一个名为 heart.svg 的 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

纠错
反馈