Angular svg 作为显示为文本的组件的模板答案

【问题标题】：Angular svg as template for component shown as textAngular svg 作为显示为文本的组件的模板
【发布时间】：2020-07-10 16:34:30
【问题描述】：

我目前正在尝试使用这样的 Angular 组件来显示 svg 图标

import {Component} from '@angular/core';

@Component({
    selector: 'app-profile-icon',
    templateUrl: './profile-icon.svg',
    styleUrls: ['./profile-icon.component.scss'],
})
export class ProfleIconComponent {
}

我在一个 html 文件中调用这个元素。该组件已实例化，但没有 svg 内容。只是带有一些随机文本的 svg 路径。

我错过了一些 Angular 配置吗？因为如果我在没有组件的情况下这样写，或者只是将 svg 内容复制粘贴到 html 模板，它就可以正常工作。

<img src='./profile-icon.svg'>

非常感谢。

【问题讨论】：

标签： javascript html angular svg

【解决方案1】：

将资产文件夹添加到您的 angular.json。

"assets": [
    "src/assets"
 ],

然后访问 HTML 模板中的 SVG 图标，如下所示 -

<img src="/assets/profile-icon.svg">

【讨论】：