Question

我有def.svg文件，我想将此文件导入到我的angular 5组件中。是否可以使用angular-cli导入它？如果是，我该如何导入它？或者角度5中是否存在其他任何方式？

def.svg：

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

Answer 1

您可以在component.html中添加SVG内容并在组件中访问它。

请参阅SVG graphics in Angular 2

Answer 2

尝试使用此工具导入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 {}

Angular 5，将SVG文件导入组件

2 个答案: