如何通过JSON文件在Angular 7中使用插值服务SVG图标？

Question

要显示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上的类以更改颜色和不透明度

是否有通过JSON插值在Angular 7组件中使用SVG的文档？

Answer 1

对于您拥有的数据，应在img标签上使用src。

<img [src]="item.icon">

如果您可以将其用作HTML标记，那就更好了。

"icon": "<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>",

<div [innerHTML]="items.icon"></div>