我一直想知道 Angular2 中使用 SVG 图标的最佳做法是什么。 我看到目前有两种主要方法： 1.将SVG转换为字体。 2. 组件内嵌SVG XML。
我们开始使用 ICOMOON 的字体方法，但我们的问题是我们有多色图标，然后我们应该只为这些图标创建组件（对于我们在 SPAN/DIV 上使用 CSS 属性的其他图标）
我们使用 Inline SVG 方法的问题是代码有点乱（我的模板中的 XML 属性）
还有其他方法可以使用吗？
【问题讨论】：
标签： angular
我使用这种方式将 svg 图标和图像放入我的网站：
如果你有带有.svg 扩展名的图片/图标，你可以直接将它添加到Img 标签中，方法是放src。这样您就可以在一个单独的文件 (yourIcon.svg) 中管理 svg 代码。
<div>
<img src="yourIcon.svg">
</div>
如果您想通过 UI 上的用户输入/事件动态控制 SVG 图像/图标 Css 样式，请查看此链接： Angular 2 : Controlling SVG Image/Icon Css Styles dynamically through user inputs/events on UI
注意1：注意img源位置。根位置是您的 index.html 文件所在的位置。
注意2：只是补充一下，您可以随时编辑svg文件的代码。要查看你的 icon/image.svg 的代码，你必须使用任何编辑器（比如 Sublime），你只需要打开那个 .svg 文件。下面是图像“simpleCircle.svg”（使用 Adobe Illustrator 制作）的示例代码，如果您在编辑器中打开它，您将看到它。您可以进行任何更改并再次保存：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 175.7 177" style="enable-background:new 0 0 175.7 177;" xml:space="preserve">
<style type="text/css">
.st0{
fill:#FFFFFF;
stroke:#000000;
stroke-width:8;
stroke-miterlimit:10;
}
</style>
<circle id="XMLID_1_" class="st0" cx="91.2" cy="87.2" r="75"/>
【讨论】：
您也可以为此使用ng-inline-svg 模块（或可能其他类似的现有解决方案）。
它基本上是中间的东西——你将把你的 SVG 放在单独的文件中，当页面加载时会被内联，所以你可以通过 JS/CSS 来操作它。
<a class="navbar-brand" routerLink="/" inlineSVG="/assets/img/logo.svg"></a>
这将导致这样的 DOM：
<a class="navbar-brand" inlinesvg="/assets/img/logo.svg" routerlink="/" href="/">
<svg width="105" height="29" viewBox="0 0 105 29" xmlns="http://www.w3.org/2000/svg">
// ...
</svg>
</a>
【讨论】：