Showing posts with label ng-inline-svg. Show all posts
Showing posts with label ng-inline-svg. Show all posts


November 13, 2017
Angular directive for inserting an SVG file inline within an element.

Formerly called ng2-inline-svg

Angular 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.


 npm install --save ng-inline-svg  
IMPORTANT: If you're using a version of Angular prior to v4.3.0, you must use ng-inline-svg v3.4.0 or earlier.


Add InlineSVGModule to your list of module imports:
 import { InlineSVGModule } from 'ng-inline-svg';  
  declarations: [AppComponent],  
  imports: [BrowserModule, InlineSVGModule],  
  bootstrap: [AppComponent]  
 class AppModule {}  
If you want to configure the base URL, you can use the forRoot function:
 InlineSVGModule.forRoot({ baseUrl: '' })  
If you want to configure the base URL later, use the service's function:
 import { SVGCacheService } from 'ng-inline-svg';  
 class YourComponent {  
  constructor(svgService: SVGCacheService) {  
   svgService.setBaseUrl({ baseUrl: '' });  
You can then use the directive in your templates:
  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. Support for icons using the symbol method is also supported (e.g. [inlineSVG]="'#shape-id'").



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.
injectComponent boolean false Injects an <inline-svg> component containing the SVG inside the element with the directive.
removeSVGAttributes string[]
An array of attribute names to remove from all child elements within the SVG.
forceEvalStyles boolean false Forces embeded style tags' contents to be evaluated (for IE 11).
evalScripts 'always', 'once', 'none' 'always' Whether to evaluate embedded scripts in the loaded SVG files.
fallbackImgUrl string
URL for a regular image to be displayed as a fallback if the SVG fails to load.


Property name Callback arguments Description
onSVGInserted e: SVGElement Emits the SVGElement post-insertion.
onSVGFailed e: any Emits when there is some error (e.g. embed SVG not supported, fetch failed, etc.)

Note: Special thanks to Eugene Cheung
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.