CODEWITHSUNDEEP
angular5typescript2.0
Jeyabalan Thavamani
Jeyabalan Thavamani

Reputation: 3327

Angular 5, import SVG file into component

I have def.svg file, I want to import this file into my angular 5 component. Is it possible to import it using angular-cli? If yes, How can I import it? Or Is any other way exists in angular 5?

def.svg:

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

Upvotes: 3

Views: 19721

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

Try this one for importing SVG and displaying it inline https://github.com/arkon/ng-inline-svg

Installation

npm install --save ng-inline-svg

Configuration

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

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

Usage

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

Upvotes: 3

Related Questions