ng2-inline-svg

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

[cacheSVG]

Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page.

Default: true

[replaceContents]

Replaces the contents of the element with the SVG instead of just appending it to its children.

Default: true

[removeSVGAttributes]

An array of attribute names to remove from all child elements within the SVG.

Outputs

(onSVGInserted)

Emits the SVGElement that was inserted.