在现代 Web 开发中，SVG 图标被广泛使用，它具有无损缩放、清晰度高、文件体积小等优点。本文将介绍如何在 Angular 应用中使用 SVG 图标。
步骤一：获取 SVG 图标
首先，我们需要准备一些 SVG 图标。可以使用第三方图标库，也可以自己设计或绘制。得到 SVG 图标后，需要注意以下几个问题：
- SVG 图标必须是有效的 XML 文档
- SVG 图标应该设置
viewBox属性，以确保它们按适当的比例缩放 - SVG 图标的
<svg>元素应该没有宽度和高度属性 - SVG 图标可以包含
<use>元素，让其它元素引用该图标
假设我们有一个名为 icon.svg 的 SVG 文件，它包含一个具有独特 ID 的图标：
<svg viewBox="0 0 24 24"> <path d="M12 6c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/> </svg>
步骤二：创建 SVG 图标组件
下一步是创建 Angular 组件来显示 SVG 图标。我们将使用 Angular 的 Renderer2 和 ElementRef 类，它们分别负责将 SVG 元素添加到 DOM 中并设置属性。
-- -------------------- ---- -------
------ - ---------- ------ ----------- ---------- ------ - ---- ----------------
------------
--------- ---------------
--------- ----------------------------
--
------ ----- ---------------- ---------- ------ -
-------- ------- -------
------------------- --- ----------- ------- --------- ---------- --
---------- -
----- ---------- - ---------------------------------- -------
----- ---------- - ---------------------------------- -------
-------------------------------------- ------- -------------------
------------------------------------- ------------
---------------------------------- ------------
----- ----------- - ----------------------
-------------------------------------- ------------
-
-该组件接受一个 iconId 输入，该输入将在将来用于 use 元素的 href 属性。
在该组件中，我们使用 Renderer2 来创建一个 svg 元素和一个 use 元素，并将 use 元素的 href 属性设置为 iconId 属性。最后，我们将它们添加到 host 元素中。
步骤三：导入 SVG 图标
现在，我们需要将 SVG 文件导入到 Angular 应用中。您可以使用 Angular CLI 的 assets 属性来导入 SVG 文件夹：
{
...
"assets": [
"src/assets"
],
...
}现在，我们可以使用 HttpClient 获取 SVG 文件中的内容：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -------------- ----------------------------------
--
------ ----- ------------ ---------- ------ -
------------------- ----- ----------- --
---------- -
--------------------------------- - ------------- ------ ------------------- -- -
----- ------ - --- ------------
----- --- - ---------------------------- ---------------------------------
-------------------------------
---
-
-在该组件中，我们使用 HttpClient 获取 SVG 文件中的内容，并将其解析为 DOM 元素。然后，我们将其添加到 document.body 中，这样它就可以从任何地方使用。
步骤四：使用 SVG 图标
完整的用法如下：
<app-svg-icon iconId="my-icon"></app-svg-icon>
您可以在任何 Angular 模板中使用该组件，只需将 iconId 设置为导入的 SVG 文件中图标的 ID 即可。
结论
现在您已经可以在 Angular 应用中使用 SVG 图标了！我们创建了一个名为 SvgIconComponent 的组件，把 SVG 添加到 DOM 中，并用它来呈现我们想要的任何图标。现在，您可以使用第三方图标库或自己的设计来添加无缝的 SVG 图标到您的 Angular 应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f6897e9a7045d0d728f26