前言
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，能够创建详细的、高质量的图像。在前端开发中，我们通常使用 SVG 图标库，为我们的网站和应用程序添加图标。
本文将介绍如何在 Angular 中使用 SVG 矢量图标库，让您的网站变得更美观，且不失可维护性和可扩展性。
介绍
SVG 矢量图标库之所以优于传统的位图图标（如 PNG、JPEG）或者字体图标，是因为它们提供了更好的分辨率和可扩展性。尤其是在不同分辨率的设备上，SVG 图标保持清晰且不失真，这是传统字体图标无法做到的。此外，SVG 图标可以使用 CSS 和 JavaScript 进行样式控制和动画效果，使网站变得更生动。
在 Angular 中，我们可以使用现成的 SVG 矢量图标库，比如 Material Icon、Font Awesome 等等。接下来，我们将使用 Material Icon 作为示例图标库，并介绍如何使用它。
示例
首先，我们需要将 Material Icon 库添加到项目中。我们可以通过以下命令在项目中安装 Material Icon：
npm install material-design-icons
安装完成后，在要使用它的组件中，我们需要将该库添加到组件中，并在 HTML 中引用它：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ----------------------------
------ - --------------- - ---- -------------------------
------------
--------- -------------------
--------- -
--------- --------------------------
--
---------- ---------------------------------
--
------ ----- -------------------- -
------------------- ---------------- ----------------
------- ------------- ------------- -
--------------------------------
-------
-------------------------------------------------------------------
--
-
-在上述代码中，我们使用了 Angular Material 的 MatIconRegistry 和 DomSanitizer 服务来添加 SVG 图标。在组件的构造函数中，我们调用 matIconRegistry.addSvgIcon() 方法，将名为 “menu” 的 SVG 图标添加到我们的程序中。
在 HTML 中，我们使用 mat-icon 元素来调用我们添加的 SVG 图标。可以使用 svgIcon 属性来引用 “menu” 图标。如此简单，我们就可以在 Angular 中使用 Material Icon 了。
总结
本文介绍了如何在 Angular 中使用 SVG 矢量图标库，特别是 Material Icon，将其添加到您的项目中。在实际项目中，我们可以使用现成的 SVG 图标库，比如 Material Icon、Font Awesome 等等。使用 SVG 图标有许多好处，如高质量、可扩展、可维护、可控制性和动画效果等。
希望这篇文章可以帮助您了解如何在 Angular 中使用 SVG 图标库，以及如何将更好地使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64571044968c7c53b09e7e59