ng2-inline-svg

Demo

Angular 2 directive for inserting an SVG inline within an element, allowing for easily styling with CSS like fill: currentColor;.

This is based on md-icon, except this is meant purely for inserting SVG files within an element, without the extra things like font icons.

Installation

npm install --save ng2-inline-svg

Usage

Add InlineSVGModule to your list of module imports:

import { InlineSVGModule } from 'ng2-inline-svg';

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

You can then use the directive in your templates:

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

The SVG file (if found) will be inserted inside the element with the [inlineSVG] directive.

Options

Inputs

Property name	Type	Default	Description
cacheSVG	boolean	true	Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page.
prepend	boolean	false	Inserts before the first child instead of appending, overwrites replaceContents
replaceContents	boolean	true	Replaces the contents of the element with the SVG instead of just appending it to its children.
removeSVGAttributes	string[]		An array of attribute names to remove from all child elements within the SVG.

Outputs

Property name	Callback arguments	Description
onSVGInserted	e: SVGElement	Emits the SVGElement post-insertion.