angular - 在 Angular2 中使用 SVG 图标

Question

我一直想知道 Angular2 中使用 SVG 图标的最佳实践是什么。
我看到目前有两种主要方法:
1.将SVG转换为字体。
2. 在组件中内联 SVG XML。

我们开始使用 ICOMOON 的字体方法，但我们的问题是我们有多色图标，然后我们应该只为这些图标创建组件(对于我们在 SPAN/DIV 上使用 CSS 属性的其他图标)

我们使用内联 SVG 方法的问题是代码有点乱(我模板中的 XML 属性)

我们还有其他方法可以使用吗？

Answer 1

我用这种方式在我的网站上放置了 svg 图标和图像:

如果您有带有 .svg 扩展名的图像/图标，您可以通过放置 src 将其直接添加到 Img 标签中。这样您就可以在一个单独的文件 (yourIcon.svg) 中管理 svg 代码。

<div>
    <img src="yourIcon.svg">
</div>

如果您想控制 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”(使用 Adob​​e 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"/>