简介
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