Angular2でのSVGアイコンの使用

Question

私はSVGアイコンを使用するためのAngular2のベストプラクティスが何であるか疑問に思いました。 現在、2つの主な方法があります。 1. SVGをフォントに変換します。 2.コンポーネントのインラインSVG XML。

我々はICOMOONを使用してフォントの方法を使用し始めたが、我々の問題は、我々は、マルチカラーのアイコンを持っているということでしたし、我々は唯一のこれらのアイコンのためのコンポーネントを作成する必要があります（他のアイコンのために、我々はSPAN/DIVにCSS属性を使用）

インラインSVGメソッドの問題は、コードがちょっと混乱していることです（テンプレートのXML属性）

これ以上使用できるメソッドはありますか？

Answer 1

私は私のウェブサイトにSVGアイコンや画像を置くためにこの方法を使用：

あなたがの.svg拡張子を持つ画像/アイコンを持っている場合は、あなたが直接、SRCを置くことによって、imgタグでそれを追加することができます。この方法で、saparateファイル（yourIcon.svg）のsvgコードを管理できます。あなたは動的 UI上のユーザ入力/イベントを通じSVGイメージ/アイコンCSSスタイルを制御したい場合には

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

このリンクをチェックアウトしてください： Angular 2 : Controlling SVG Image/Icon Css Styles dynamically through user inputs/events on UI

注1：IMGソースの世話をしますロケーション。ルートの場所は、index.htmlファイルが存在する場所です。

注2：追加するだけで、いつでもsvgファイルのコードを編集できます。アイコン/ 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"/>