Angular 5, импортировать файл SVG в компонент

Question

У меня есть файл def.svg, я хочу импортировать этот файл в мой угловой компонент 5.Можно ли импортировать его с помощью angular-cli?Если да, как я могу его импортировать?Или есть какой-либо другой способ существует в угловых 5?

def.svg:

<svg class="carousel-svg-defs">
   <defs> 
    .....
   </defs>
</svg>

Answer 1

Попробуйте это для импорта SVG и отображения его в строке https://github.com/arkon/ng-inline-svg

Установка

npm install --save ng-inline-svg

Конфигурация

import { HttpClientModule } from '@angular/common/http';
import { InlineSVGModule } from 'ng-inline-svg';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, InlineSVGModule.forRoot()],
  bootstrap: [AppComponent]
})
class AppModule {}

Использование

@Component({
  selector: 'app',
  template: `
    <div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>
  `
})
export class AppComponent {}

Answer 2

Вы можете добавить свой SVG-контент в component.html и получить к нему доступ в своем компоненте.

См. Графика SVG в угловых 2