angular5 - Angular 5，将 SVG 文件导入组件

Question

我有 def.svg 文件，我想将此文件导入到我的 angular 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 {}