Как мне импортировать svg из файла в компонент в angular 5? - PullRequest
Новая
       33

Как мне импортировать svg из файла в компонент в angular 5?

0 голосов
/ 30 октября 2018

Все учебники с добавлением svg к компоненту в AngularCli, которые я нашел, рекомендуют вставить его в html-шаблон, примерно так: 

<div>
  <svg viewBox="0 0 250 250">
    <svg:g class="group">
       <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" />
       <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"/>
    </svg:g>
  </svg>
</div>

Но я хочу сохранить шаблоны чистыми и добавить в них только несколько тегов с URL в отдельный файл SVG, примерно так: 

<svg class="star">
        <use xlink:href="../../../assets/images/svg/star.svg"
               x="0"
               y="0" />
</svg>

Как мне использовать отдельные svg-файлы в компонентах?

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Один из способов сделать это - установить свойство id для вашего файла SVG и поместить файлы SVG в папку ресурсов. затем используйте этот идентификатор в mat-icon следующим образом: 

<mat-icon matSuffix svgIcon="your-id"></mat-icon>

это лучший способ сделать это; Таким образом, вам не нужно иметь дело с тегами SVG в HTML-коде вашего интерфейса. также это поддерживает значки Google.

хотя это работает, если вы используете угловой материал.

0 голосов
/ 30 октября 2018

Включите ваши SVG-файлы в папку src / assets и добавьте папку svg в ваш angular.json файл. 

"assets": [ "src/assets/svg/*" ]

Таким образом, вы можете включить файл в свои компоненты по своему усмотрению.

...