SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它可以被缩放到任意大小而不失去清晰度。在前端开发中，我们常常需要使用图标来装饰网站或应用程序，而 SVG 图标则是一个非常好的选择。在本文中，我们将介绍如何在 Angular 项目中使用 SVG 图标。
为什么使用 SVG 图标
相比于传统的位图图标（如 PNG、JPEG 等），SVG 图标具有以下优点：
- 可缩放：SVG 图标可以被缩放到任意大小而不失去清晰度，非常适合在不同分辨率的屏幕上使用。
- 可以编辑：SVG 图标可以被编辑，例如改变颜色、增加阴影等。
- 小文件大小：SVG 文件通常比位图文件更小，可以提高网站或应用程序的加载速度。
在 Angular 项目中使用 SVG 图标
在 Angular 项目中使用 SVG 图标有两种方式：一种是将 SVG 图标文件直接嵌入到 HTML 文件中，另一种是使用 Angular Material 的 mat-icon 组件。
将 SVG 图标文件嵌入到 HTML 文件中
在 Angular 项目中，我们可以使用 <svg> 标签来嵌入 SVG 图标文件。例如，下面的代码将一个名为 heart.svg 的 SVG 图标文件嵌入到 HTML 文件中：
---- ---------- ------------ ---- ------------------------------------------------ ------
其中，xlink:href 属性指定了 SVG 图标文件的路径和 ID，width 和 height 属性指定了 SVG 图标的大小。请注意，SVG 图标文件需要放置在项目的 assets/icons 目录下。
使用 Angular Material 的 mat-icon 组件
Angular Material 是一套 UI 组件库，其中包含了一个名为 mat-icon 的组件，它可以用来显示 SVG 图标。使用 mat-icon 组件的好处是，我们不需要手动嵌入 SVG 图标文件，而是可以直接使用 Angular Material 内置的图标。
首先，我们需要在项目中安装 Angular Material：
--- ------- ------ ----------------- ------------ -------------------
然后，在 app.module.ts 文件中引入 MatIconModule：
------ - ------------- - ---- -------------------------
-----------
-------- -
-- ---
--------------
--
--
------ ----- --------- - -现在，我们就可以在 HTML 文件中使用 mat-icon 组件来显示图标了。例如，下面的代码将一个名为 favorite 的图标显示在页面上：
-----------------------------
请注意，我们不需要手动引入 favorite.svg 文件，因为 Angular Material 已经内置了这个图标。
总结
本文介绍了如何在 Angular 项目中使用 SVG 图标。我们可以将 SVG 图标文件嵌入到 HTML 文件中，也可以使用 Angular Material 的 mat-icon 组件来显示图标。相比于传统的位图图标，SVG 图标具有可缩放、可以编辑、小文件大小等优点，非常适合在前端开发中使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660544e5d10417a22230241b