如何在 Angular 应用程序中使用 SVG 图标
Angular 是一种广泛使用的现代化前端框架，它提供丰富的功能和插件，以帮助开发者更好地构建应用程序。其中之一就是在应用程序中使用 SVG 图标。SVG（Scalable Vector Graphics），可伸缩矢量图形，是一种使用 XML 绘制的二维图形格式，支持在高分辨率下缩放无损失。在本文中，我们将深入探讨如何在 Angular 应用程序中使用 SVG 图标。
- 引入 SVG 图标
要在 Angular 应用程序中使用 SVG 图标，首先需要将其引入到项目中。你可以通过以下两种方式来实现：
（1）直接将 SVG 文件放置在项目路径中的 assets 目录下，并在应用程序中使用。
（2）将 SVG 文件作为 Angular 组件进行打包，然后在应用程序中引入。
通常，选择第 2 种方式。在 Angular 中，可以使用 Angular CLI 快速创建一个 SVG 图标组件：
ng generate component svg-icon --inlineStyle=true --inlineTemplate=true
运行以上命令会生成一个名为 <svg-icon></svg-icon> 的组件，并在组件中添加样式和模板。现在可以将 SVG 文件的内容直接复制到该组件中。
- 处理 SVG 图标
SVG 文件引入成功之后，我们需要对其进行进一步处理。通常，SVG 图标不能直接使用，需要先进行处理才能正常渲染。在 Angular 应用程序中，你可以使用 DomSanitizer 来处理 SVG 文件。
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer) {}
getSafeHtml(content: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(content);
}以上代码中，DomSanitizer 类是 Angular 平台浏览器的安全 API，用于处理 HTML、CSS 和 JavaScript 代码中的潜在安全风险。bypassSecurityTrustHtml() 方法将字符串 contents 转换为安全 HTML。
- 展示 SVG 图标
当你完成 SVG 图标的处理之后，就可以在模板中展示它了。在模板中，你需要通过 ng-content 插槽将 SVG 图标的内容进行展示。
<svg-icon>
<svg width="32" height="32" viewBox="0 0 32 32">
<path d="M0 16 Q 10 10 20 16 Q 30 22 30 16" stroke="red" fill="none" />
</svg>
</svg-icon>运行以上代码，你会看到一个红色的半圆在 32x32 的矩形中心处。
当然，这只是一个简单的 SVG 图标。在实际项目中，不同的 SVG 图标可能具有不同的尺寸、颜色、样式等属性。针对这些需求，你需要添加进一步的处理逻辑和代码。
总结
在 Angular 应用程序中使用 SVG 图标是一项非常有用的功能。通过上述步骤，你可以在应用程序中快速引入SVG 图片，并对其进行处理和展示。希望这篇文章能为你的 Angular 开发之路提供一些指导帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c89ce05ad90b6d04143025
