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文件，像这样：

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

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

Answer 1

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

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

通过这种方式，您可以根据需要将文件包括在组件中。

Answer 2

执行此操作的一种方法是为svg文件设置id属性，并将svg文件放入资产文件夹中。然后像这样在mat-icon中使用该ID：

<mat-icon matSuffix svgIcon="your-id"></mat-icon>

这是一种更好的方法；这样，您不必在UI html代码中处理svg标签。也支持Google图标。

如果您使用的是角形材料，这会起作用。

Answer 3

如果您有logo.svg：

将其放入您的src/assets文件夹中
在angular.json配置中包含文件夹："assets": [ "src/assets" ]
通过模板<img src="assets/svg/logo.svg">

Answer 4

所以我正在尝试这样做，对于我的一生，我无法让这个 svg 出现，直到......经过多次互联网搜索，我认为这不仅仅是我，如果你复制意大利面来自互联网的路径那么也许你忘了包括这个

xmlns="http://www.w3.org/2000/svg"

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
<path d="I love copying and pasting paths"/>
</svg>

然后你可以继续做你的

 <img src="assets/img/logo.svg" />

如果这不起作用并且您想以某种方式处理图像，则将图像放入

assets/img/copypasta.png

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

4 个答案: