angular-svg-icon

Angular SVG Icon

The angular-svg-icon is an Angular 2+ service and component that provides a means to inline SVG images to allow for them to be easily styled by CSS and code.

The service provides an icon registery that loads and caches a svg indexed by its url. The component is responsible for displaying the svg. After getting the svg from the registry it clones the SVGElement and the svg to the component's inner HTML.

A working demo shows solution in action.

How to use?

$ npm i angular-svg-icon --save

Integration

The angular-svg-icon should work as-is with webpack/angular-cli. Just add the AngularSvgIconModule.

import { AngularSvgIconModule } from 'angular-svg-icon';

@NgModule({
    imports: [ AngularSvgIconModule ],
    ...
})
export class AppModule {}

Usage

Basic usage is:

<svg-icon src="path/to/icon.svg"></svg-icon>

An example of styling the svg:

<svg-icon src="images/eye.svg" style="fill:green;width:90px;"></svg-icon>

Programatic interaction with the registry is also possible. Include the private iconReg:SvgIconRegistryService in the constructor:

constructor(private iconReg:SvgIconRegistryService) { }

The registry has two public functions: loadSvg(string) and unloadSvg(string).

To preload a svg file into the registry:

{
   ...
   this.iconReg.loadSvg('foo.svg');
}

To unload a svg from the registry.

{
    ...
    this.iconReg.unloadSvg('foo.svg');
}

Background

The svg-icon is an Angular 2 component that allows for the continuation of the AngularJS method for easily inlining SVGs explained by Ben Markowitz and others. Including the SVG source inline allows for the graphic to be easily styled by CSS.

The technique made use of ng-include to inline the svg source into the document. Angular 2, however, drops the support of ng-include, so this is my work-around method.

Note: The icon component from angular/material2 used to have a direct means to load svg similar to this, but this functionality was removed because of security concerns.

License

MIT

Author

• David Czeck @czeckd