我正在构建一个 Angular 应用程序(Angular 4/5/6)并且想在我的组件模板中使用 SVG 精灵。
题:
假设我已经生成了我的 SVG 图标精灵 ( icons.svg),我怎样才能让 Angular 将我的 SVG 图标精灵注入/导入到我的组件模板中?
有没有一种方法可以将我的 SVG 图标精灵注入/导入到我的组件中,而不必使用任何 3rd 方模块/指令并使用 Angular 本身在本地进行?
背景/问题:
正如在讨论这篇文章,icons.svg文件将包含所有定义为SVG图标<symbol>。然后我可以<use>假设icons.svg在 DOM 中注入了 ,在我的 HTML 中呈现选定的图标。
我使用IcoMoon app生成了 SVG 精灵,并将其保存icons.svg到我的 Angular 应用程序中。下面是我的示例 Angular 组件 ( app.component.ts ),我在其中尝试注入/导入icons.svg文件并尝试在我的 HTML 中呈现 SVG 图标。然而,Angular 并没有渲染我的 SVG 图标。我似乎错误地注入了 SVG 图标精灵文件。
更新: