title: How do I import svg from file to a component in angular 5?
body: <p>All tutorials with adding svg to a component in AngularCli that I found recommend to insert it in html template, something like this: </p>
  
  <pre><code>&lt;div&gt;
    &lt;svg viewBox="0 0 250 250"&gt;
      &lt;svg:g class="group"&gt;
         &lt;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" /&gt;
         &lt;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"/&gt;
      &lt;/svg:g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I wish to keep templates clear and instert only few tags in it with url to separated svg file, somwehow like this: </p>
  
  <pre><code>&lt;svg class="star"&gt;
          &lt;use xlink:href="../../../assets/images/svg/star.svg"
                 x="0"
                 y="0" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Ho do I use separated svg files in components?</p>