如何将svg从文件导入角度为5的组件中? [英] How do I import svg from file to a component in angular 5?
本文介绍了如何将svg从文件导入角度为5的组件中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我发现所有将svg添加到AngularCli中的组件的教程都建议将其插入html模板中,如下所示:
All tutorials with adding svg to a component in AngularCli that I found recommend to insert it in html template, something like this:
<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文件,像这样:
But I wish to keep templates clear and instert only few tags in it with url to separated svg file, somwehow like this:
<svg class="star">
<use xlink:href="../../../assets/images/svg/star.svg"
x="0"
y="0" />
</svg>
我该如何在组件中使用单独的svg文件?
Ho do I use separated svg files in components?
推荐答案
将SVG文件包含在src/assets文件夹中,并将svg文件夹添加到您的angular.json
文件中.
Include your SVG files in src/assets folder and add the svg folder in your angular.json
file.
"assets": [ "src/assets/svg/*" ]
通过这种方式,您可以根据需要将文件包括在组件中.
This way you can include the file in your components as you wish.
这篇关于如何将svg从文件导入角度为5的组件中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文