相关疑难解决方法(0)

如何在 Angular 组件 HTML DOM 中注入 SVG 图标精灵?

我正在构建一个 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 图标精灵文件。

更新:

  1. 我已经知道一个类似的问题,带有 angular-cli 的 SVG 图标系统,其中建议的答案是使用 Node 模块svg-sprite使用 CSS …

svg svg-sprite angular-components angular

8
推荐指数
1
解决办法
1万
查看次数

标签 统计

angular ×1

angular-components ×1

svg ×1

svg-sprite ×1