如何将 svg 从文件导入到 angular 5 中的组件？

Question

我发现所有将 svg 添加到 AngularCli 中的组件的教程都建议将其插入 html 模板中，如下所示：

 <div>
  <svg viewBox="0 0 250 250">
    <svg:g class="group">
       <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
       <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
    </svg:g>
  </svg>
</div>

但我希望保持模板清晰，并在其中仅插入几个带有 url 的标签以分隔 svg 文件，somwehow 是这样的：

 <svg class="star">
        <use xlink:href="../../../assets/images/svg/star.svg"
               x="0"
               y="0" />
</svg>

我如何在组件中使用单独的 svg 文件？

原文由 mr_blond 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的 SVG 文件包含在 src/assets 文件夹中，并将 svg 文件夹添加到您的 angular.json 文件中。

 "assets": [ "src/assets/svg/*" ]

这样您就可以根据需要将文件包含在您的组件中。

原文由 Harini P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你有 logo.svg ：

1. 把它放在你的 src/assets 文件夹中
2. 在 angular.json 配置中包含文件夹： "assets": [ "src/assets" ]
3. 从模板中引用它： <img src="assets/svg/logo.svg">

原文由 Boris Yakubchik 发布，翻译遵循 CC BY-SA 4.0 许可协议