【发布时间】：2019-12-15 12:09:48
【问题描述】：
为了在 Angular 7 组件中显示内容，我们使用 JSON。在通过 JSON 将它们提供给组件时，我遇到了使用 UX 团队的 SVG 图标的问题。我知道使用 img 标签将不允许我使用 CSS 类来更改图标颜色，并且需要多个相同图标，并且不适合这个项目。我已经尝试了多种方法来让它工作。我尝试通过
嵌入svg字符串"icon": "data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>",
<embed [src]="items.icon">
但我收到错误“JSON 中第 64 位的意外令牌 h”
我也尝试在 SVG 标记中使用插值，但出现与上述类似的错误。
我也尝试过在 div 标签内插值，但我得到的是路径而不是图标。
我需要能够做什么- 1. 将 SVG 放在 JSON 中，并通过插值将其提供给组件。 2.改变SVG上的class来改变颜色和不透明度
有没有关于通过 JSON 插值在 Angular 7 组件中使用 SVG 的文档？
【问题讨论】：