Question

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

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

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

我们可以使用更多方法吗？

Answer 1

我用这种方式将svg图标和图像放在我的网站上：

如果您有扩展名为.svg的图像/图标，可以通过输入src直接将其添加到Img标记中。这样您就可以在saparate文件（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＆＃39; （使用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"/>

Answer 2

您也可以使用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>

在Angular2中使用SVG图标

2 个答案: